1. 程式人生 > >使用jQuery Autocomplete(自動完成)外掛,結合ajax實現搜尋框匹配

使用jQuery Autocomplete(自動完成)外掛,結合ajax實現搜尋框匹配

要實現如圖所示效果,通過ajax,和Autocomplete完成匹配,整了好久,做一下記錄。

先分析各個引數的作用:

我們需要在html程式碼中引入jQuery UI的js檔案和css檔案,由於jQuery UI是依賴於jQuery的,因此我們還需要在引入jQuery UI之前引入jQuery。

  1. <!DOCTYPE html>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>jQuery Autocomplete入門示例</title>
  6. <!-- 引入jQuery UI的css檔案 -->
  7. <linkhref="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css"/>
  8. <!-- 引入jQuery的js檔案 -->
  9. <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.9.1.js"></script>
  10. <!-- 引入jQuery UI的js檔案 -->
  11. <scripttype="text/javascript"src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"
    ></script>
  12. </head>
  13. <body>
  14. <labelfor="language">請輸入指定的語言:</lable>
  15. <inputid="language"name="language"type="text">
  16. </body>
  17. </html>

現在,我們就來編寫js程式碼讓language輸入框實現自動完成功能。要實現自動完成功能,我們需要如下呼叫jQuery UI擴充套件的autocomplete()方法:

$("#language").autocomplete(optionsObj);

這裡的optionsObj是一個用於配置autocomplete相關引數選項的JavaScript物件。我們可以參考Autocomplete官方文件的相關說明來設定該物件。

Autocomplete有一個非常重要的屬性引數source,它表示用於自動完成功能的資料集合。source屬性的值可以是一個數組;也可以是一個字串,用於表示一個遠端請求的URL地址,通過處理該URL返回的資料從而獲得autocomplete所需的資料;它還可以是一個回撥函式,以便於完成一些複雜的資料處理。

現在,我們就使用最簡單的方式,給source屬性指定一個靜態的陣列,來初步實現自動完成功能。

  1. $("#language").autocomplete({
  2.     source:[
  3. "Chinese",
  4. "English",
  5. "Spanish",
  6. "Russian",
  7. "French",
  8. "Japanese",
  9. "Korean",
  10. "German"
  11. ]
  12. });

此時,使用瀏覽器訪問該html頁面就會發現,我們已經完成的最基本的自動完成功能了

使用autocomplete實現基本的自動完成功能使用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請求獲取遠端資料作為資料來源。

  1. $("#language").autocomplete({
  2.     source:"public.php"
  3. });

對應的 ajax-actions.php 的伺服器頁面程式碼如下:

  1. <?php
  2. header('Content-Type:text/html;charset=UTF-8');
  3. //為了方便舉例,這裡使用陣列來模擬,你也可以在實際應用中從資料庫中讀取資料
  4. //返回的資料最好是陣列或物件型別的JSON格式字串
  5. $languages = array('Chinese','English','Spanish','Russian','French','Japanese','Korean','German');
  6. echo json_encode($languages);
  7. ?>

此時,我們再次訪問該頁面,我們仍然可以看到自動完成的輸入效果。

從遠端伺服器獲取資料的自動完成功能從遠端伺服器獲取資料的自動完成功能

注意:細心的讀者可能已經注意到了,不管是從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>&nbsp;藥店名稱:
<input type="text" name="phName" value="" id="phName" class="rph" >
<input type="hidden" name="rpId" id="rpId" />
</td>

autocompleteRedisPhData程式碼如下