jQuery是廣泛使用的Javascript庫，它提供了許多方便的方法和功能。其中一個常用的功能是輸入框下拉列表。

使用jQuery輸入框下拉列表，可以讓用戶更加方便地輸入信息。當用戶在輸入框中輸入字符時，會顯示一個下拉列表，列表中會顯示匹配的選項。

// 創建輸入框和下拉列表
var inputBox = $('<input>');
var dropdownList = $('<ul>');
// 設置輸入框屬性
inputBox.attr('type', 'text');
inputBox.attr('placeholder', '請輸入內容');
// 隱藏下拉列表
dropdownList.hide();
// 設置下拉列表樣式
dropdownList.css('position', 'absolute');
dropdownList.css('left', inputBox.position().left);
dropdownList.css('top', inputBox.position().top + inputBox.outerHeight());
dropdownList.css('width', inputBox.outerWidth());
dropdownList.css('background-color', '#fff');
dropdownList.css('border', '1px solid #ccc');
// 監聽輸入框鍵盤事件
inputBox.on('keyup', function() {
// 獲取輸入框內容
var query = inputBox.val();
// 清空下拉列表
dropdownList.empty();
// 查找匹配選項
var matches = ['選項1', '選項2', '選項3'];
for (var i = 0; i < matches.length; i++) {
if (matches[i].indexOf(query) !== -1) {
// 添加匹配選項到下拉列表
var option = $('<li>');
option.text(matches[i]);
dropdownList.append(option);
}
}
// 顯示或隱藏下拉列表
if (dropdownList.children().length > 0) {
dropdownList.show();
} else {
dropdownList.hide();
}
});
// 監聽下拉列表鼠標事件
dropdownList.on('mouseenter', 'li', function() {
$(this).css('background-color', '#eee');
}).on('mouseleave', 'li', function() {
$(this).css('background-color', '#fff');
}).on('click', 'li', function() {
// 點擊選項，將選項內容填入輸入框中
inputBox.val($(this).text());
// 隱藏下拉列表
dropdownList.hide();
});
// 將輸入框和下拉列表添加到頁面中
$('body').append(inputBox);
$('body').append(dropdownList);

以上是使用jQuery創建輸入框下拉列表的代碼。當用戶在輸入框中輸入內容時，會自動顯示匹配的選項。用戶可以通過鼠標或鍵盤來選擇選項。

使用jQuery輸入框下拉列表可以大大提高用戶的輸入效率和體驗。同時，它也可以為頁面添加更加豐富的交互功能。