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