📌  相关文章
📜  带有下拉选择2的搜索框 - Javascript(1)

📅  最后修改于: 2023-12-03 15:25:26.926000             🧑  作者: Mango

带有下拉选择2的搜索框 - Javascript

这是一个使用Javascript编写的带有下拉选择2的搜索框，可以让用户通过输入关键字或选择下拉列表进行搜索。下拉选择2是一个优化版的下拉列表，可以支持输入框内的实时搜索和多选等功能。

实现步骤
HTML部分

首先在HTML中添加一个输入框和一个下拉选择2。

<input type="text" id="search-input">
<select class="js-example-basic-multiple" multiple="multiple"></select>

其中输入框的ID为“search-input”，下拉选择2的class为“js-example-basic-multiple”，并开启了多选功能。

引入JS文件和样式

在HTML的<head>标签中引入下拉选择2的样式和JS文件。

<head>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
初始化下拉选择2

在JS文件中，需要对下拉选择2进行初始化，以使用其内置功能。

$(document).ready(function() {
  $('.js-example-basic-multiple').select2();
});

其中，$(document).ready()是一个JQuery函数，用于确保当页面加载完成后再执行下面的代码。.select2()是下拉选择2的初始化方法。

获取输入框中的值

使用jQuery监听输入框的变化，并获取输入框中的值。

$('#search-input').on('input', function() {
  var keyword = $(this).val();
  // 对搜索框中的值进行处理
});

在输入框的值发生变化时，获取输入框中的值，然后对其进行处理。这里可以通过Ajax请求后端API获取搜索结果，也可以在前端进行过滤和排序等操作。

填充下拉列表

在获取到搜索结果后，使用下拉选择2提供的API来填充下拉列表。

var data = [{id: 1, text: '选项1'},{id: 2, text: '选项2'}];
$('.js-example-basic-multiple').empty().select2({
  data: data
});

其中，data是一个数组，包含了下拉列表的所有选项。.empty()方法用于清空下拉列表，然后再使用.select2()方法初始化下拉列表并填充数据。

结语

以上就是使用Javascript实现带有下拉选择2的搜索框的全部步骤。除了基本的输入搜索外，下拉选择2还支持多选、异步加载、隐藏值等高级功能，可根据实际需求进行调整。