實現輸入內容提示的功能（仿google_百度輸入框提示）jquery.ui.autocomplete.js外掛

FreeeLinux發表於2017-06-15
GojQueryUIJS

實驗：

       對input控制元件實現輸入內容提示功能（仿google_百度輸入框提示功能）

目的：

       優化網頁互動性，學習jQuery的部分操作。

知識背景：

       利用jquery中的jquery.ui.autocomplete.js外掛。

      如以下jquery.ui中的基本測試程式碼：

[html] view plaincopy
  1. <html lang="en">  
  2. <head>    
  3. <meta charset="utf-8" />    
  4. <title>jQuery UI Autocomplete - Default functionality</title>    
  5. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />    
  6. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
  7. <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>     
  8. <script>  
  9.     $(function () {  
  10.         var availableTags = ["ActionScript", "測試",  
  11.   "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",  
  12.    "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",  
  13.    "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",  
  14.     "Python", "Ruby", "Scala", "Scheme"];  
  15.         <SPAN style="COLOR: #ff0000"><STRONG>$("#tags").autocomplete({ source: availableTags });  
  16. </STRONG></SPAN>    });   
  17.       </script>  
  18. </head>  
  19. <body>   
  20.     <div class="ui-widget">    
  21.         <label for="tags">Tags: </label>    
  22.             <input id="tags" />  
  23.     </div>   
  24. </body>  
  25. </html>  
[html] view plain copy
  1. <html lang="en">  
  2. <head>    
  3. <meta charset="utf-8" />    
  4. <title>jQuery UI Autocomplete - Default functionality</title>    
  5. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />    
  6. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
  7. <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>     
  8. <script>  
  9.     $(function () {  
  10.         var availableTags = ["ActionScript", "測試",  
  11.   "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",  
  12.    "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",  
  13.    "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",  
  14.     "Python", "Ruby", "Scala", "Scheme"];  
  15.         <span style="color:#ff0000;"><strong>$("#tags").autocomplete({ source: availableTags });  
  16. </strong></span>    });   
  17.       </script>  
  18. </head>  
  19. <body>   
  20.     <div class="ui-widget">    
  21.         <label for="tags">Tags: </label>    
  22.             <input id="tags" />  
  23.     </div>   
  24. </body>  
  25. </html>  


如圖：

       

 

作為一個基礎使用者，暫不考慮jqury的各種功能能夠以及語法結構，相信有點程式設計基礎的都知道，在

[html] view plaincopy
  1. <SPAN style="COLOR: #ff0000"> $("#tags").autocomplete({ source: availableTags });</SPAN>  
[html] view plain copy
  1. <span style="color:#ff0000;"> $("#tags").autocomplete({ source: availableTags });</span>  

這段程式碼中，對<input>中id為tags的控制元件進行了一個自動補全的繫結，補全繫結資料來源於自定義的陣列availableTags。

我們需要思考的就是如何把這個提供的補全資料和我資料庫中的資料進行繫結。

因此，需要了解一下.autocomplete()這個函式具體的一些引數設定。

具體可以訪問網站檢視：http://api.jqueryui.com/1.9/autocomplete/

這裡我只把與實驗有關的進行說明一下：

minLengthType: Integer   Default:1

如：

[html] view plaincopy
  1. $( ".selector" ).autocomplete({ minLength: 1 });  
[html] view plain copy
  1. $( ".selector" ).autocomplete({ minLength: 1 });  

實現的是在輸入多少個字元後彈出提示框選項，一般我覺得定位1比較好，輸入1個字元後開始提示，1也是預設值，當然如果想還沒有輸入就進行提示，可以設定為0。
官方解釋如下：

    The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

sourceType: Array orString orFunction( Object request, Function response(Object data ) )Default:none; must be specified

指定資料來源，可以使陣列，字串，或者一個函式（主要與資料庫互動後返回的值）

如果資料來源是陣列（Array）的話，可以有兩種指定方式，如：

An array of strings: [ "Choice1", "Choice2" ]An array of objects with label and value properties:[ { label: "Choice1", value: "value1" }, ... ]

   其中label為顯示在提示框中的值，value為選擇後插入到input控制元件中的值。

如果資料來源為字串（String）的話，必須制定一個可以返回JSON資料的URL地址

    就是說這裡的String必須是一個JSON結構的字串。（JSON資料簡單說就是可以理解為["str1","str2"]或[ { label: "Choice1", value: "value1" }, ... ]這樣的資料值。因為這裡需要的是資料來源，只要指定好資料來源格式標準即可，你要是有創意，也可以自己定義，總之最後把需要的字串返回即可。

    假如提取資料的頁面為http://example.com,那麼傳入該頁面時也會傳入一個作為模糊查詢的引數如：temp

    因此url可以構造為http://example.com?temp=[inputstr]這裡inputstr就是輸入在input控制元件目前的值。

如果資料來源為一個互動函式function(request,response),就可以自定義請求，響應需要做的工作，如呼叫一個後臺檔案，資料庫等。如：

[html] view plaincopy
  1. $("#key").autocomplete({  
  2.                 minLength: 1, source: function (request, response) {  
  3.                     $.ajax({  
  4.                         type: "POST",  
  5.                         url: "ServerData.ashx?keyword=" + request.term,  
  6.                         contentType: "application/json; charset=utf-8",  
  7.                         dataType: "json",   
  8.                         <SPAN style="COLOR: #ff0000">success</SPAN>: function (data) {  
  9.                             response($.map(data, function (item) {  
  10.                                 return { value: item};  
  11.                             }));  
  12.                         },   
  13.                         <SPAN style="COLOR: #ff0000">error</SPAN>: function () {  
  14.                             alert("ajax請求失敗");  
  15.                         }  
  16.                     });  
  17.                 }  
  18.             })  
[html] view plain copy
  1. $("#key").autocomplete({  
  2.                 minLength: 1, source: function (request, response) {  
  3.                     $.ajax({  
  4.                         type: "POST",  
  5.                         url: "ServerData.ashx?keyword=" + request.term,  
  6.                         contentType: "application/json; charset=utf-8",  
  7.                         dataType: "json",   
  8.                         <span style="color:#ff0000;">success</span>: function (data) {  
  9.                             response($.map(data, function (item) {  
  10.                                 return { value: item};  
  11.                             }));  
  12.                         },   
  13.                         <span style="color:#ff0000;">error</span>: function () {  
  14.                             alert("ajax請求失敗");  
  15.                         }  
  16.                     });  
  17.                 }  
  18.             })  


呼叫$.ajax並設定其中的type,url,contentType等引數

如url：同String作為資料來源方式類似，但是為了測試，用這種方法的一個好處是可以設定操作成功後的功能

success：成功後執行的功能，返回提取的資料值即可；

error:彈出對話方塊，請求失敗（如資料庫連線失敗，資料查詢命令錯誤等）

 

實驗效果截圖：

 

呼叫url功能ServerData.ashx主要程式碼：

[csharp] view plaincopy
  1. //作為主函式使用   
  2.         public void ProcessRequest(HttpContext context)  
  3.         {  
  4.             context.Response.ContentType = "text/plain";  
  5.             string keyword = context.Request.QueryString["keyword"];   
  6.             if (keyword != null)  
  7.             {             
  8.                 JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通過JavaScriptSerializer物件的Serialize序列化為["value1","value2",...]的字串    
  9.                 string jsonString = serializer.Serialize(GetFilteredList(keyword));  
  10.                 context.Response.Write(jsonString); // 返回客戶端json格式資料   
  11.             }  
  12.         }  
[csharp] view plain copy
  1. //作為主函式使用  
  2.         public void ProcessRequest(HttpContext context)  
  3.         {  
  4.             context.Response.ContentType = "text/plain";  
  5.             string keyword = context.Request.QueryString["keyword"];   
  6.             if (keyword != null)  
  7.             {             
  8.                 JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通過JavaScriptSerializer物件的Serialize序列化為["value1","value2",...]的字串   
  9.                 string jsonString = serializer.Serialize(GetFilteredList(keyword));  
  10.                 context.Response.Write(jsonString); // 返回客戶端json格式資料  
  11.             }  
  12.         }  

 

       如果用於測試：可試著在該函式上直接返回一個字串 如： context.Response.Write("Hello World"); 然後再前臺試試輸入"he"看看效果。

       該函式主要功能是提取"keword"的值，即使用者輸入的字串，用於模糊查詢關鍵字，對返回的結果進行JSON格式化處理，最後返回。

        關於如何利用C#進行資料庫查詢在此省略，可以下載專案綜合包看看（地址見末尾）。

 

專案包簡介：vs2010,sql server 2008,需要用的js,css均在壓縮包中。

index.html,atest.aspx均可作為測試頁面，需要連線資料庫；

test.aspx為不與資料庫進行互動，採用的是Array作為資料來源的方式，可單獨執行；

 資料庫可在web.config中進行更改，查詢語句可以再ServerData.ashx中進行修改，程式碼中也有註釋，可參考。  

     Good  Luck ！ 希望對你也有點幫助。



參考：

<!DOCTYPE html>
<html>
<head>
<title>測試</title>
<meta charset="utf-8">
</head>
<body>


<div class="ui-widget">
<label for="tags">標籤：</label>
<input id="tags">
</div>


</body>
<script type="text/javascript" src="jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>


  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split(val) {
      return val.split(/;\s*/);
    }
    function extractLast(term) {
      return split(term).pop();
    }
 
    $("#tags")
      .bind("keydown", function(event) {
        if (event.keyCode === $.ui.keyCode.TAB &&
            $(this).data("ui-autocomplete").menu.active) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function(request, response) {
          response($.ui.autocomplete.filter(
            availableTags, extractLast(request.term)));
        },
        focus: function() {
          return false;
        },
        select: function(event, ui) {
          var terms = split(this.value);
          terms.pop();
          terms.push( ui.item.value );
          terms.push("");
          this.value = terms.join(";");
          return false;
        }
      });
  });

相關文章