JQuery是一個快速、兼容性好且功能豐富的JavaScript庫。其中,輸入自動是JQuery中非常常見的一個功能,有很多實際應用場景。下面我們來看看如何實現這個功能。
$(document).ready(function() {
var availableTags = [
"Apple",
"Banana",
"Cherry",
"Durian",
"Elderberry",
"Fig",
"Grape",
"Honeydew",
"Imbe",
"Jackfruit",
"Kiwi",
"Lemon",
"Mango",
"Nectarine",
"Orange",
"Pear",
"Quince",
"Raspberry",
"Strawberry",
"Tangerine",
"Ugli Fruit",
"Vetch",
"Watermelon",
"Xigua",
"Yellow Watermelon",
"Zucchini"
];
$("#inputAutoComplete").autocomplete({
source: availableTags
});
});
上面的代碼展示了一個簡單的JQuery輸入自動的例子。首先,我們需要在頁面加載完成后定義一個變量availableTags,這個變量包含了所有可能會匹配的文本內容。
然后,在輸入框的ID為inputAutoComplete的元素上調用autocomplete方法,并將availableTags傳入source參數中。這樣,當用戶在輸入框中輸入文本時,就會自動匹配已定義的文本內容,并顯示匹配的結果。
實現輸入自動功能非常簡單,只需要引入JQuery庫,定義可匹配的內容,然后在輸入框上調用autocomplete方法即可。如果你還沒有用過JQuery,那么趕緊嘗試一下吧!