如果你需要一個(gè)輸入框，它可以很快地找到對(duì)應(yīng)的輸入內(nèi)容，JQuery為你提供了一個(gè)非常方便的解決方案。這就是輸入并自動(dòng)完成功能。

輸入并自動(dòng)完成是指，在輸入框中輸入一些字符或單詞時(shí)，頁(yè)面會(huì)自動(dòng)搜索匹配的結(jié)果，并展示在一個(gè)下拉菜單中。用戶可以選擇他們需要的結(jié)果并進(jìn)行下一步的操作。這個(gè)功能讓用戶可以省去手動(dòng)輸入大量重復(fù)內(nèi)容的時(shí)間，提高了用戶體驗(yàn)。

$(function(){
// 從后臺(tái)獲取匹配結(jié)果的方法
function searchResults(searchTerm){
var results = [];
// 這里需要從后臺(tái)搜索對(duì)應(yīng)的結(jié)果
// return (resultData) || [];
}
// 為輸入框添加輸入監(jiān)聽
$('#searchBox').on('input', function(e){
// 獲取輸入框中的文本
var searchTerm = $(this).val().toLowerCase();
// 搜索對(duì)應(yīng)的結(jié)果
var results = searchResults(searchTerm);
if (results.length > 0){
// 清除之前的下拉菜單
$('#searchResults').empty();
// 為每一項(xiàng)結(jié)果添加信息和事件監(jiān)聽
$.each(results, function(index, result){
var li = $('<li>').appendTo('#searchResults');
$('<span>').text(result.name).appendTo(li).on('click', function(){
alert('你選擇了' + result.name);
});
});
}
});
});

以上代碼展示了如何使用JQuery創(chuàng)建輸入并自動(dòng)完成的功能。當(dāng)用戶在輸入框中輸入文本時(shí)，頁(yè)面會(huì)自動(dòng)從后臺(tái)搜索與文本匹配的結(jié)果，并用下拉菜單展示。下拉菜單中的每一項(xiàng)都帶有點(diǎn)擊事件監(jiān)聽，當(dāng)用戶選擇某一項(xiàng)時(shí)，相應(yīng)的事件會(huì)被觸發(fā)。

輸入并自動(dòng)完成是一項(xiàng)非常有用的功能，可以讓用戶更快速地輸入內(nèi)容，提高用戶滿意度。JQuery的使用讓實(shí)現(xiàn)這項(xiàng)功能變得非常容易，只需要幾行代碼就可以完成。如果你需要實(shí)現(xiàn)輸入并自動(dòng)完成功能，不妨嘗試使用JQuery吧！