HTML 选择字段上的自动完成

Question

我有这个简单的select html字段，我正在学习JS，我只是想在这个字段中有一个自动完成的东西，所以当用户输入它时它应该有这种功能，可以做到吗？

 <html> <body> <select> <option>USA</option> <option>India</option> <option>Canada</option> <option>UK</option> </select> </body> </html>

Answer 1

我已经使用了这个库并根据我的需要对其进行了修改。 我已对其进行了修改，以使搜索清晰并自定义下拉菜单样式。 很容易做到。 你也可以试一试。 https://davidstutz.github.io/bootstrap-multiselect/

下面是示例

 <!-- Initialize the plugin: --> $(document).ready(function() { $('#example-getting-started').multiselect({ enableFiltering: true, includeFilterClearBtn: false }); });

 .hide { display:none;}

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.1/js/bootstrap-multiselect.min.js" integrity="sha512-fp+kGodOXYBIPyIXInWgdH2vTMiOfbLC9YqwEHslkUxc8JLI7eBL2UQ8/HbB5YehvynU3gA3klc84rAQcTQvXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <body> <select id="example-getting-started" class="hide"> <option value="usa">USA</option> <option value="india">India</option> <option value="canada">Canada</option> <option value="uk">UK</option> </select> </body>

Answer 2

先前的答案工作正常，但搜索框的另一点是对小写字母的敏感性。 所以这个更准确的代码可以解决您的问题。

<div class="container my-5">
<select class="mdb-select md-form" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>

注意：我在这里使用 bootstrap v4 也是源代码的链接https://mdbootstrap.com/snippets/jquery/mdbootstrap/921549#html-tab-view

HTML 选择字段上的自动完成

问题描述

2 个解决方案

解决方案1
0 2022-06-11 09:38:41

解决方案2
0 2022-06-28 01:16:12

HTML 选择字段上的自动完成

问题描述

2 个解决方案

解决方案1 0 2022-06-11 09:38:41

解决方案2 0 2022-06-28 01:16:12

解决方案1
0 2022-06-11 09:38:41

解决方案2
0 2022-06-28 01:16:12