使用jQuery Autocomplete(自動完成)外掛,結合ajax實現搜尋框匹配
要實現如圖所示效果，通過ajax,和Autocomplete完成匹配，整了好久，做一下記錄。
先分析各個引數的作用：
我們需要在html程式碼中引入jQuery UI的js檔案和css檔案，由於jQuery UI是依賴於jQuery的，因此我們還需要在引入jQuery UI之前引入jQuery。
- <!DOCTYPE html>
- <htmllang="zh">
- <head>
- <metacharset="UTF-8">
- <title>jQuery Autocomplete入門示例</title>
- <!-- 引入jQuery UI的css檔案 -->
- <linkhref="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css"/>
- <!-- 引入jQuery的js檔案 -->
- <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <!-- 引入jQuery UI的js檔案 -->
- <scripttype="text/javascript"src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
- </head>
- <body>
- <labelfor="language">請輸入指定的語言：</lable>
- <inputid="language"name="language"type="text">
- </body>
- </html>
現在，我們就來編寫js程式碼讓language輸入框實現自動完成功能。要實現自動完成功能，我們需要如下呼叫jQuery UI擴充套件的autocomplete()方法：
$("#language").autocomplete(optionsObj);
這裡的optionsObj是一個用於配置autocomplete相關引數選項的JavaScript物件。我們可以參考Autocomplete官方文件的相關說明來設定該物件。
Autocomplete有一個非常重要的屬性引數source，它表示用於自動完成功能的資料集合。source屬性的值可以是一個數組；也可以是一個字串，用於表示一個遠端請求的URL地址，通過處理該URL返回的資料從而獲得autocomplete所需的資料；它還可以是一個回撥函式，以便於完成一些複雜的資料處理。
現在，我們就使用最簡單的方式，給source屬性指定一個靜態的陣列，來初步實現自動完成功能。
- $("#language").autocomplete({
- source:[
- "Chinese",
- "English",
- "Spanish",
- "Russian",
- "French",
- "Japanese",
- "Korean",
- "German"
- ]
- });
此時，使用瀏覽器訪問該html頁面就會發現，我們已經完成的最基本的自動完成功能了
使用autocomplete實現基本的自動完成功能
不過，有些時候我們希望列表顯示的文字和實際輸入的值並不一致。此時，我們為source指定多個物件的陣列，每個物件必須包含label和value屬性，label表示顯示的文字，value表示實際輸入的值(當然它也可以包括其他屬性，你可以自行進行相關操作)。
$("#language").autocomplete({// 靜態的資料來源，根據label屬性進行顯示或模糊匹配，當給輸入框設定value屬性值 source:[{ label:"Chinese", value:1},{ label:"English", value:2},{ label:"Spanish", value:3},{ label:"Russian", value:4},{ label:"French", value:5},{ label:"Japanese", value:6},]});// 最上面由多個字串組成的陣列，會被視為label和value值相同、均為該字串的物件
更多的時候，我們希望該輸入框顯示的還是label屬性值，但還要給另外的元素(例如隱藏文字域)設定value屬性值，或者做一些其他處理。我們可以使用select事件來協助處理。
$("#language").autocomplete({// 靜態的資料來源 source:[{ label:"Chinese", value:1, sayHi:"你好"},{ label:"English", value:2, sayHi:"Hello"},{ label:"Spanish", value:3, sayHi:"Hola"},{ label:"Russian", value:4, sayHi:"Привет"},{ label:"French", value:5, sayHi:"Bonjour"},{ label:"Japanese", value:6, sayHi:"こんにちは"},], select:function(event, ui){// 這裡的this指向當前輸入框的DOM元素// event引數是事件物件// ui物件只有一個item屬性，對應資料來源中被選中的物件 $(this).value = ui.item.label; $("#lang_id").val( ui.item.value ); $("#sayHi").html( ui.item.sayHi );// 必須阻止事件的預設行為，否則autocomplete預設會把ui.item.value設為輸入框的value值 event.preventDefault();}});
在實際應用上，我們的資料來源並不是一成不變的。大多數情況下，我們的資料都儲存在資料庫中，此時，我們就需要使用autocomplete通過AJAX請求獲取遠端資料作為資料來源。
- $("#language").autocomplete({
- source:"public.php"
- });
對應的 ajax-actions.php 的伺服器頁面程式碼如下：
- <?php
- header('Content-Type:text/html;charset=UTF-8');
- //為了方便舉例，這裡使用陣列來模擬，你也可以在實際應用中從資料庫中讀取資料
- //返回的資料最好是陣列或物件型別的JSON格式字串
- $languages = array('Chinese','English','Spanish','Russian','French','Japanese','Korean','German');
- echo json_encode($languages);
- ?>
此時，我們再次訪問該頁面，我們仍然可以看到自動完成的輸入效果。
從遠端伺服器獲取資料的自動完成功能
注意：細心的讀者可能已經注意到了，不管是從js陣列中獲取資料，還是從後臺伺服器獲取資料，我們的資料並沒有發生變化；但是，我們在從後臺獲取資料的頁面輸入"c"時，顯示了所有的資料項，而不是如之前一樣只顯示篩選過濾之後的"Chinese"和"French"。這是因為，當我們從遠端請求獲取資料時，Autocomplete認為伺服器已經進行了過濾處理，返回的資料都是直接可用的，無需再過濾。
在傳送AJAX請求時，Autocomplete會把當前輸入框中的文字以預設引數名term的形式追加到我們設定的URL地址後面。當我們輸入一個c時，Autocomplete實際傳送的請求路徑為/ajax-actions.php?term=c。
在上面的例項中，由於我們使用的是php陣列來模擬伺服器返回的資料，沒有根據使用者的輸入來返回對應的資料，才會導致上述結果。如果在實際應用中，使用類似如下SQL語句來查詢資料，則不會存在該問題。
<?php
// 注意：對於使用者輸入一般需要進行額外的安全處理
$term = $_GET['term'];
$sql ="select column1 as label, column2 as value, ... from table1 where column1 like '$term%'";
$languages = query($sql);
echo json_encode($languages);?>
此外，有些時候我們需要根據使用者的輸入或其他操作來構造不同的請求URL，我們可以為source指定函式。Autocomplete將使用者輸入交給該函式，該函式可以進行任何處理，然後把通過任何方式獲得的資料交給Autocomplete處理即可。
$("#language").autocomplete({// 通過函式來獲取並處理資料來源 source:function(request, response){// request物件只有一個term屬性，對應使用者輸入的文字// response是一個函式，在你自行處理並獲取資料後，將JSON資料交給該函式處理，以便於autocomplete根據資料顯示列表// 自行處理並獲取資料...var dataObj =[...];// 表示處理後的JSON資料 response(dataObj);// 最後將資料交給autocomplete去展示 }});
在上面的講解中，我們介紹了autocomplete的必需引數選項source。除此之外，還有許多的引數選項可以給我們提供更加強大的其他輔助功能。請參考其引數列表和方法列表。
結合ajax實現過程如下
jsp頁面：引入
<script type="text/javascript" src="/fftg/scripts/autocompleteRedisPhData.js"></script>
<script type="text/javascript" src="/fftg/scripts/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/fftg/styles/jquery.autocomplete.css" />
新增標籤用於繫結：
<td> 藥店名稱：
<input type="text" name="phName" value="" id="phName" class="rph" >
<input type="hidden" name="rpId" id="rpId" />
</td>
autocompleteRedisPhData程式碼如下