jQuery Autocomplete是一個靈活的文本輸入補全插件,可幫助用戶快速輸入和選擇預加載的選項。它非常適用于表單、搜索框和其他用戶輸入字段。
使用jQuery Autocomplete非常簡單。首先,您需要引入jQuery庫和jQuery Autocomplete庫:
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery Autocomplete -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.autocomplete/1.4.4/jquery.autocomplete.min.js"></script>
接下來,您需要創建一個輸入字段,將其與Autocomplete綁定,并指定要預加載的選項列表:
<!-- 創建輸入字段 -->
<input type="text" id="myInput">
<!-- 使用jQuery Autocomplete -->
<script>
var options = [
"蘋果",
"香蕉",
"橙子",
"葡萄"
];
$('#myInput').autocomplete({
source: options
});
</script>
在這個例子中,我們創建了一個輸入字段,并將其與Autocomplete綁定。我們指定了一個選項列表,包含四個水果。當用戶輸入文字時,Autocomplete將自動顯示匹配的選項供其選擇。
jQuery Autocomplete還具有許多可定制的選項,例如允許用戶輸入額外的文字、指定最大數量的顯示結果以及更改匹配選項的排序方式。您可以在官方文檔中了解更多。