select远程搜索数据回显
时间: 2023-11-08 15:56:13 浏览: 49
对于select远程搜索数据回显,可以使用下拉框插件如select2或chosen等。这些插件可以在输入框中输入搜索关键字,然后异步请求远程数据,将匹配的结果显示在下拉框中供选择。
当用户选择某一项时,可以将选项的值赋值给隐藏的input框,然后在表单提交时将该值提交到后端进行处理。
示例代码:
HTML代码:
```
<!-- 引入select2插件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- 输入框 -->
<select id="search" class="js-select2">
<option value=""></option>
</select>
<input type="hidden" id="result" name="result" />
<!-- JavaScript代码 -->
<script>
$(document).ready(function () {
// 初始化select2插件
$('.js-select2').select2({
ajax: {
url: '/search', // 远程搜索地址
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // 搜索关键字
};
},
processResults: function (data, params) {
return {
results: data.items // 远程搜索结果
};
},
cache: true
},
minimumInputLength: 1 // 最小输入字符数
});
// 监听select2的change事件,将选项值赋值给隐藏的input框
$('.js-select2').on('change', function () {
$('#result').val($(this).val());
});
});
</script>
```
后端接口代码:
```
// 模拟远程搜索接口
app.get('/search', function (req, res) {
var q = req.query.q;
var items = [
{ id: 1, text: 'Option 1' },
{ id: 2, text: 'Option 2' },
{ id: 3, text: 'Option 3' },
{ id: 4, text: 'Option 4' },
{ id: 5, text: 'Option 5' }
];
var results = [];
for (var i = 0; i < items.length; i++) {
if (items[i].text.indexOf(q) >= 0) {
results.push(items[i]);
}
}
res.json({ items: results });
});
```