使选择下拉菜单可搜索

每个人都熟悉 HTML 选择标签，它使用户能够从可用选项中选择一个或多个。虽然这是几乎每个网站表单中最常见的功能之一，但用户滚动并找到所需的选项可能会令人沮丧。经典下拉菜单在搜索方面支持的很少，仅限于根据按下的键自动关注第一个选项。最重要的是，必须以排序方式放置选项以使其高效。使选择下拉菜单可搜索在用户体验方面具有优势，我们将在今天不到一分钟的时间内实现这一目标。

为了使下拉菜单可搜索，我们将使用 jQuery 及其库来创建名为 select2 的选择框。因此，我们的第一步是获取这些很棒的库的链接并将其放在我们的页面上。我将使用最新的 jQuery 和 选择2 撰写本文时的图书馆。您可以访问附加的链接以检查其他版本。

 // 样式  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">  
 // 脚本  
 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> 

接下来让我们通过给它一个 id 和一些选项来以正常方式制作我们的 select HTML 元素

 <select id="language">  
 <option value="js">Javascript</option>  
 <option value="java">爪哇</option>  
 <option value="go">戈朗</option>  
 <option value="c">C</option>  
 <option value="python">Python</option>  
 <option value="c#">C＃</option>  
 <option value="ruby">红宝石</option>  
 </select>

我们得到一个有用但并不总是有效的选择下拉菜单。

现在要用可搜索的下拉列表替换经典的选择下拉列表，我们只需要初始化 select2 函数并根据需要传递一些属性。

 $("#language").select2();

在这个阶段，选择下拉菜单已经是可搜索的，但我们可以用它做更多的事情。例如，我们可以设置一个占位符，如果没有找到结果则显示一条消息，在显示结果之前要输入的最少字符，从 AJAX 请求中获取结果，从多个选项源合并等等。在本文中，我们将只处理一些属性，但您可以查看 文件 看看是否有任何可以满足您的需求。

为了给选择下拉一个占位符，传递一个具有“占位符”键的对象，该键包含属性“id”和“text”。为 id 提供一个空值并在 text 属性中设置所需的占位符。

 占位符：{  
 ID： ''，  
 text: '选择一种语言'  
 }

接下来，当用户仅在输入一定数量的字符后才开始输入内容时，要开始缩小结果范围，请将键“minimumInputLength”设置为一个数字。当要通过网络检索数据并减少网络调用时，这通常很有用。

 最小输入长度：2

如果根据用户输入的内容没有匹配结果怎么办？那么最好显示一些自定义消息，这可以通过提供包含“结果”属性的“语言”对象来完成。此属性将返回在没有匹配选项时显示的消息。

 语： {  
 没有结果：函数（）{  
 返回“未找到结果”；  
 }  
 }

通过结合上述性质，我们将得到

 $("#select").select2({  
 占位符：{  
 ID： ''，  
 text: '选择一种语言'  
 },  
 最小输入长度：2，  
 语： {  
 没有结果：函数（）{  
 返回“未找到结果”；  
 }  
 },  
 });

而网站上的最终结果如下

我们将在接下来的文章中讨论更多功能，但现在，请自己尝试并快乐编码

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37588/41441816