jQuery Combobox 是一個簡單易用的下拉菜單插件。使用Combobox插件可以讓用戶在輸入框內輸入內容時，動態顯示帶有關鍵字的下拉菜單。接下來我們展示一個簡單的示例來演示如何使用Combobox插件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Combobox 示例</title>
<link rel="stylesheet" >
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var items = [
"Java",
"JavaScript",
"Python",
"PHP",
"C#",
"Swift",
"Ruby",
"Objective-C",
"TypeScript",
"C++",
"Kotlin",
"Scala",
"Rust",
"Perl",
"Lua",
"Go",
"Visual Basic",
"F#",
"ASP.NET",
"Rails",
"Django",
"React",
"AngularJS",
"Vue.js"
];
$( "#tags" ).combobox({
source: items
});
} );
</script>
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input-wrap {
position: relative;
overflow: hidden;
width: 100%;
}
.custom-combobox-input-wrap input[type="text"] {
width: 100%;
}
.custom-combobox-list {
display: none;
position: absolute;
z-index: 1;
}
.custom-combobox-list li {
margin: 0;
padding: 5px 10px;
white-space: nowrap;
list-style: none;
background-color: #fff;
cursor: pointer;
}
.custom-combobox-list li:hover {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="ui-widget">
<label for="tags">語言:</label>
<select id="tags" name="tags" style="display: none;">
</select>
</div>
</body>
</html>以上代碼創建了一個下拉菜單，可以讓用戶選擇編程語言。在輸入框中輸入關鍵字時，只有和輸入內容匹配的選項會被動態地顯示。當用戶選擇一個選項時，它的值就會出現在代碼中的下拉菜單中。