前言
在pc端的項目中，經常會用到表單標簽，莫過於是select和input這兩種，這兩種相當常用。但往往原生的功能不盡人意，即使 input中type有n多屬性，甚至連時間控件都有，但仍舊滿足不了我們大天朝的需求，試問會有多少使用原生時間控件的人，也不會有幾個，相信大部分的前端，亦或者是后端， 都有自己的插件小倉庫。需求的那些事
嗯……目前只限於input和select這兩個標簽
一個輸入框到底能有些啥需求呢
- 1、能夠輸入（最低的標准）
- 2、能夠輸入並且能夠本地校驗（例如只能夠輸入數字，不能輸入為空）
- 3、能夠輸入並且能夠本地校驗並且能夠給出相對應的提示
- 4、能夠輸入並且能夠本地校驗和遠程校驗並且能夠給出相對應的提示
- …………
當然並不止這些需求，需求千奇百怪。
但像我們原生的標簽最多滿足上述兩種要求。差不多就嗝屁了，剩下的便是八仙過海各顯神通了。
說到這里，強推 jquery-validation這個插件，基本上建立基本的mvc項目，都會很友好的幫你安裝好這個插件。剩下的就是等你調用了。
這是一個還不錯的驗證插件，不僅有前端驗證，還有ajax遠程驗證。很不錯
好吧，扯遠了，想說的是除了上述的必備需求以外，還有些需求也是很常見的。比如點擊輸入框，會有個漂亮的時間插件。 這個也推薦一兩個插件吧……bootstrap-datepicker, bootstrap-daterangepicker
不過想說的仍舊不是這個，而是輸入匹配出現下下拉框選擇，如下圖
恩……就是個這樣的
源碼如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>jQuery UI Autocomplete - Default functionality</title> 7 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 8 <link rel="stylesheet" href="/resources/demos/style.css"> 9 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 10 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 11 <script> 12 $( function() { 13 var availableTags = [ 14 "ActionScript", 15 "AppleScript", 16 "Asp", 17 "BASIC", 18 "C", 19 "C++", 20 "Clojure", 21 "COBOL", 22 "ColdFusion", 23 "Erlang", 24 "Fortran", 25 "Groovy", 26 "Haskell", 27 "Java", 28 "JavaScript", 29 "Lisp", 30 "Perl", 31 "PHP", 32 "Python", 33 "Ruby", 34 "Scala", 35 "Scheme" 36 ]; 37 $( "#tags" ).autocomplete({ 38 source: availableTags 39 }); 40 } ); 41 </script> 42 </head> 43 <body> 44 45 <div class="ui-widget"> 46 <label for="tags">Tags: </label> 47 <input id="tags"> 48 </div> 49 50 51 </body> 52 </html>
這里用的是一個叫做autocomplete的小插件。
jquery仍舊很強大
聲明下，目前我們用的是.net mvc,在此之前，我合作的都是java的后台，前后端分離的。而最近這一年來，大致就是前端也寫，c#也寫，最大的感受便是如果都一個人來寫一個項目的話，確實會少許多步驟，但畢竟一個人能夠做的有限。 即使你足夠全能，有很難有那么充實的精力。
順帶一提，我是es6語法和vue2，react，angular這種框架的忠實用戶者，可惜我們用的是razor語法。並不是說不好，但就前端而言，上述那幾個肯定更為強大和方便。
在這種情況下，面對層出不窮的需求，只能再次把目光投回了jquery。
在除了上述的那個需求以外，還有個需求也是我們經常用的，那就是select，對，你沒有看出，就是select這個標簽，這個標簽到底承載着多事情呢，我們看看圖就知道了
- 1、首先得能夠綁定遠程數據吧
- 2、要能夠獲取選中的回調了，不然你的聯動基本沒戲了
這里再說個對前端來說的深坑，那就是原生的select在ios系統和windows系統的表現樣式差距很大，有興趣的可以自己試試，所以原生的select標簽幾乎無用武之地。
而剛剛圖中，所展示的功能，是一個名為 select2的一個插件
其實我覺得這個應該很有名了，畢竟20k的星擺在那里
而最上面的圖，提到的那個輸入能夠匹配的是jquery的那個小插件，提到這里，不得不感嘆姜還是老的辣。
當你進入jquery官網，你在下載最新的jquery之余，可以觀察下 plugins，目測應該有幾千個插件，而剛剛的autocomplete也是其中之一。
