0

I have this simple select html field, i am learning JS, I just want to have a autocomplete kind of thing in this field, so when user type it should have this kind of functionality, can It be done?

enter image description here

<html>
<body>

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

</body>

</html>
ankit_dot
  • 85
  • 5
  • Does this answer your question? [`list`-attribute of HTMLInputElements](https://stackoverflow.com/a/21958246/13561410) – Oskar Grosser Jun 11 '22 at 09:39
  • Personally if I had to do it with JavaScript I would have added an eventListener on the input and each time the user changes the value, I would have filtered the data source – adevinwild Jun 11 '22 at 09:51

2 Answers2

0

I have used this library and modified it for my needs. I had modified it to have search clear and custom styling of dropdown. Easy to do. You can also give it a try. https://davidstutz.github.io/bootstrap-multiselect/

Below is the example

<!-- 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>
B Kalra
  • 821
  • 6
  • 17
0

The previous answer is working fine, but one little more addition to the searchbox is sensiability to lower cas. so this more accurate code for your issue.

<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>

NB: i'm using bootstrap v4 here is also a link to the source code https://mdbootstrap.com/snippets/jquery/mdbootstrap/921549#html-tab-view

Abdelouahab Bella
  • 1
  • 1