jQuery UI Autocomplete 使用多個欄位做查詢

jQuery UI Autocomplete是用來幫助使用者輸入資料時,列出可用的選項供選擇的功能。下圖是官網的範例:
auto1

那麼如果用在多個條件的查詢該如何做呢?
auto2

假設我們有以下的欄位,用來搜尋人員的資料:

然後假設目前的資料有:

如果使用 Autocomplete 預設的方式去跑,就會變成每個欄位查出來的都是獨立的東西。雖然每個欄位列出的都是各自存在的選項,但組合起來卻可能是不存在的資料。像下面這張圖明明姓名輸入了黃,卻連張姓的電話也出現了:
auto4

為了修正這個問題,我們現在想要讓 Autocomplete 在查詢時可以考慮到其它欄位輸入的內容。例如在姓名欄位只輸入姓氏,在電話輸入前幾個號碼,應該是要列出完全符合這些條件的電話號碼讓使用者選擇才對。

要完成這個功能只要修改 Autocomplete 的 source 參數,將其它的欄位值也一併送出到後端去查詢,就可以取回正確的結果。

以查電話為例,最後產生的查詢會長這樣:

這時就可以從伺服器那端去查詢正確的資料了,測試結果如下:
auto5

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *