【jQuery】jquery-ui autocomplete智能提示

時間 2019-11-18

標籤 jQuery jquery autocomplete 智能提示欄目 JQuery 简体版

原文原文鏈接

　　jQuery UI，簡而言之，它是一個基於jQuery的前端UI框架。咱們可使用jQuery + jQuery UI很是簡單方便地製做出界面美觀、功能強大、跨瀏覽器兼容的前端html界面。javascript

　　Autocomplete，是一個功能強大的自動完成輸入的jQuery插件，它也是jQuery UI的一部分。相信用過百度或者Google搜索的讀者必定不會陌生，當咱們在搜索框中開始輸入搜索的關鍵字時，搜索引擎就會智能地幫咱們聯想並匹配咱們所需的搜索關鍵字內容。php

　　1、首先了解下JQueryUI提供的重要屬性css

　　1. autoFocus：當智能提示框出現時，是否自動選中第一項，默認爲false，即不選中。　　html

　　2. delay：在按鍵後執行搜索的延時，默認爲300ms。前端

　　3. disabled：是否禁用自動完成功能，默認爲false。java

　　4. minLength：觸發自動完成功能須要輸入的最小字符數量。jquery

　　5. source：即爲指定智能提示下拉框中的數據來源，支持三種類型。ajax

　　　　① Array，主要用於本地化數據提供，支持兩種格式：字符串數組 [ "Choice1", "Choice2" ]及標籤和值屬性的Json格式數組 [ { label: "Choice1", value: "value1" }, ... ]json

　　　　② String，用於ajax請求的遠程地址連接，返回Array或Json格式字符串。數組

　　　　③ Function，回調函數，最具備靈活性的一種方式，可用於返回任何數據源方式來實現自動完成，其中包含兩個參數request，response經過request.term來獲取用戶輸入的值,經過response(argument)來對獲取的數據源進行顯示。

　　2、JQuery UI還提供了一些有用的方法

　　1. close()：關閉智能提示選擇框。

　　2. destroy()：銷燬智能提示選擇框，將其所產生的元素徹底刪除，使其恢復至初始狀態。

　　3. disable()：禁用自動完成功能。

　　4. enable()：開啓自動完成功能。

　　3、主要事件包括

　　1. change(event, ui)：當值改變時發生，ui.item爲選中的項。

　　2. close(event, ui)：當智能提示框關閉時發生。

　　3. create(event, ui)：當智能提示框建立時發生，能夠在此事件中，對外觀進行一些控制。

　　4. focus(event, ui)：當智能提示列表任意一項得到焦點時發生，ui.item爲得到焦點的項。

　　5. open(event, ui)：當智能提示框打開或更新時發生。

　　6. response(event,ui)：在搜索完成後智能提示框顯示前發生，能夠在此事件中對顯示項進行處理

　　7. search(event, ui)：在開始請求以前發生，能夠在此事件中返回false來取消請求。

　　8. select(event, ui)：當智能提示框中任意一項被選中時發生，ui.item爲選中的項。

　　示例一（基於本地數據，來源於官方demo）

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>jQuery UI Autocomplete - 本地數據</title>
 6     <link rel="stylesheet" href="jquery-ui.min.css">
 7     <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
 8     <script src="jquery-ui.min.js" type="text/javascript"></script>
 9     <style>
10     .ui-autocomplete {
11         max-height: 100px;
12         overflow-y: auto;
13         /* prevent horizontal scrollbar */
14         overflow-x: hidden;
15     }
16     /* IE 6 doesn't support max-height
17      * we use height instead, but this forces the menu to always be this tall
18      */
19     * html .ui-autocomplete {
20         height: 100px;
21     }
22     </style>
23 </head>
24 <body>
25 <div class="ui-widget">
26     <label for="tags">請輸入: </label>
27     <input id="tags">
28 </div>
29 </body>
30 <script>
31     $(function() {
32         var availableTags = [
33             "ActionScript",
34             "AppleScript",
35             "Asp",
36             "BASIC",
37             "C",
38             "C++",
39             "Clojure",
40             "COBOL",
41             "ColdFusion",
42             "Erlang",
43             "Fortran",
44             "Groovy",
45             "Haskell",
46             "Java",
47             "JavaScript",
48             "Lisp",
49             "Perl",
50             "PHP",
51             "Python",
52             "Ruby",
53             "Scala",
54             "Scheme"
55         ];
56         $( "#tags" ).focus(function(){
57             $( "#tags" ).autocomplete({
58                 source: availableTags
59             });
60         });
61         
62     });
63     </script>
64 </html>

View Code

效果圖以下：

　　示例二（基於遠程數據，來源於官方demo）

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>jQuery UI Autocomplete - 遠程數據</title>
 6     <link rel="stylesheet" href="jquery-ui.min.css">
 7     <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
 8     <script src="jquery-ui.min.js" type="text/javascript"></script>
 9     <style>
10     .ui-autocomplete-loading {
11         background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
12     }
13     </style>
14     <script>
15     $(function() {
16         function log( message ) {
17             $( "<div>" ).text( message ).prependTo( "#log" );
18             $( "#log" ).scrollTop( 0 );
19         }
20 
21         $( "#birds" ).autocomplete({
22             source: "search.php",
23             minLength: 2,
24             select: function( event, ui ) {
25                 log( ui.item ?
26                     "Selected: " + ui.item.value + " aka " + ui.item.id :
27                     "Nothing selected, input was " + this.value );
28             }
29         });
30     });
31     </script>
32 </head>
33 <body>
34 
35 <div class="ui-widget">
36     <label for="birds">請輸入: </label>
37     <input id="birds">
38 </div>
39 
40 <div class="ui-widget" style="margin-top:2em; font-family:Arial">
41     結果:
42     <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
43 </div>
44 
45 </body>
46 </html>

View Code

對應的後臺查詢的php代碼以下：

 1 <?php
 2 
 3 sleep( 3 );
 4 // no term passed - just exit early with no response
 5 if (empty($_GET['term'])) exit ;
 6 $q = strtolower($_GET["term"]);
 7 // remove slashes if they were magically added
 8 if (get_magic_quotes_gpc()) $q = stripslashes($q);
 9 
10 $items = array(
11 "Great Bittern"=>"Botaurus stellaris",
12 "Little Grebe"=>"Tachybaptus ruficollis",
13 "Black-necked Grebe"=>"Podiceps nigricollis",
14 "Little Bittern"=>"Ixobrychus minutus",
15 "Black-crowned Night Heron"=>"Nycticorax nycticorax",
16 );
17 
18 
19 $result = array();
20 foreach ($items as $key=>$value) {
21     if (strpos(strtolower($key), $q) !== false) {
22         array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));
23     }
24     if (count($result) > 11)
25         break;
26 }
27 
28 // json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions
29 echo json_encode($result);
30 
31 ?>

View Code

　　注意：當咱們從後臺獲取數據時，若是沒有其餘額外的過濾操做，Autocomplete會將過濾的操做交給服務器後臺來完成。在發送ajax請求時，Autocomplete會把當前輸入框中的文字以默認參數名term的形式追加到咱們設置的URL地址後面。當咱們輸入一個c時，Autocomplete實際發送的請求路徑爲/ajax-actions.php?term=c。所以，Autocomplete認爲服務器返回的數據就是過濾後須要顯示的數據。

參考資料：

http://www.365mini.com/page/jquery-ui-autocomplete.htm

http://www.cnblogs.com/psforever/archive/2013/03/02/2940124.htm

http://blog.csdn.net/sadfishsc/article/details/7572054

http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html