jQuery Autocomplete 是一款基于 jQuery 的自動補全插件,它可以為用戶提供更快速更準確的搜索結果,提高用戶的使用體驗。
下面是一個 jQuery Autocomplete 的實例,實現了根據用戶輸入的關鍵詞動態匹配數據列表,并在下拉框中顯示匹配的結果。
<input id="myInput" type="text" placeholder="請輸入關鍵詞"> <ul id="myList"></ul> <script> $(function(){ var data = ['Apple', 'Banana', 'Cherry', 'Durian', 'Eggplant', 'Fig', 'Grape', 'Honeydew']; $('#myInput').autocomplete({ source: data, minLength: 1, select: function(event, ui){ var value = ui.item.value; $('#myInput').val(value); return false; } }); }); </script>
在這個實例中,我們首先定義了一個輸入框和一個無序列表,然后引入了 jQuery 和 jQuery Autocomplete 的代碼。
我們通過 $() 函數將 Autocomplete 應用到輸入框上,并傳入了相關參數:source 表示自動補全所匹配的數據來源,minLength 表示用戶輸入的最小字符數,select 表示用戶選擇一項數據時所觸發的函數。
當用戶輸入關鍵詞時,Autocomplete 會自動匹配數據列表中的數據,并將匹配的結果顯示在下拉框中。當用戶選擇一項匹配的結果時,會觸發選中事件,并將選中的數據填充到輸入框中。
總的來說,jQuery Autocomplete 是一款非常實用的插件,可以幫助我們快速實現自動補全功能,極大提升用戶的使用體驗。