jQuery UI Autocomplete是用來幫助使用者輸入資料時，列出可用的選項供選擇的功能。下圖是官網的範例：
那麼如果用在多個條件的查詢該如何做呢？
假設我們有以下的欄位，用來搜尋人員的資料：
|
1 2 3 |
<input name="name" id="name" type="text" placeholder="姓名"> <input name="idnum" id="idnum" type="text" placeholder="身份證"> <input name="phone" id="phone" type="text" placeholder="電話"> |
然後假設目前的資料有：
|
1 2 3 |
黃小虎 0987654321 黃大名 0987123456 張千千 0912345678 |
如果使用 Autocomplete 預設的方式去跑，就會變成每個欄位查出來的都是獨立的東西。雖然每個欄位列出的都是各自存在的選項，但組合起來卻可能是不存在的資料。像下面這張圖明明姓名輸入了黃，卻連張姓的電話也出現了：
為了修正這個問題，我們現在想要讓 Autocomplete 在查詢時可以考慮到其它欄位輸入的內容。例如在姓名欄位只輸入姓氏，在電話輸入前幾個號碼，應該是要列出完全符合這些條件的電話號碼讓使用者選擇才對。
要完成這個功能只要修改 Autocomplete 的 source 參數，將其它的欄位值也一併送出到後端去查詢，就可以取回正確的結果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function get_data() { var data = { 'name': $("#name").val(), 'idnum': $("#idnum").val(), 'phone': $("#phone").val() }; return data; }; $(function() { $("#name").autocomplete({ source: function(request, response) { $.getJSON("/api/name", get_data(), response); } }); $("#idnum").autocomplete({ source: function(request, response) { $.getJSON("/api/idnum", get_data(), response); } }); $("#phone").autocomplete({ source: function(request, response) { $.getJSON("/api/phone", get_data(), response); } }); }); |
以查電話為例，最後產生的查詢會長這樣：
|
1 |
http://server.url/api/phone?name=xxx&idnum=xxx&phone=xxx |
這時就可以從伺服器那端去查詢正確的資料了，測試結果如下：
