Select选择框模糊查询
时间: 2023-09-11 11:04:03 浏览: 85
要实现Select选择框模糊查询,可以使用jQuery UI中的autocomplete插件。首先,需要引入jQuery和jQuery UI的库文件。然后,在HTML中添加一个Select选择框和一个隐藏的input元素,用于保存选择框选中的值。最后,在JavaScript中使用autocomplete插件来实现模糊查询。
以下是一个简单的示例代码:
HTML代码:
```html
<select id="select">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="grape">Grape</option>
<option value="orange">Orange</option>
</select>
<input type="hidden" id="select-value">
```
JavaScript代码:
```javascript
$(function() {
// 获取Select选择框中的所有选项
var options = $("#select option").map(function() {
return $(this).val();
}).get();
// 使用autocomplete插件实现模糊查询
$("#select").autocomplete({
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(options, function(value) {
return matcher.test(value);
}));
},
select: function(event, ui) {
// 将选择框选中的值保存到隐藏的input元素中
$("#select-value").val(ui.item.value);
}
});
});
```
以上代码中,首先通过$("#select option").map()方法获取Select选择框中的所有选项,并使用$.grep()方法进行模糊查询。然后,在autocomplete的select事件中,将选择框选中的值保存到隐藏的input元素中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)