-3

I have a select dropdown and trying to add search box at the top of available options, I have found a way using chosen library but I want to implement it with javascript or jquery.

how can I do this?

enter image description here

.Organization_Desg_filter_select {
    padding: 10px 0px;
    border-width: 0px;
    width: 240px;
}
<label class="mt-3 mb-0">Designation Name:</label>
                            <select class="Organization_Desg_filter_select">
                                <option selected="selected" disabled>Select</option>
                                <option value="Public Relationship Officer">Public Relationship Officer</option>
                                <option value="Officer">Officer</option>
                                <option value="Associate">Associate</option>
                                <option value="Executive">Executive</option>
                                <option value="Head of Department">Head of Department</option>
                            </select>
                            <hr class="mt-0" />
M123
  • 1,203
  • 4
  • 14
  • 31
Harsha Penugonda
  • 1
  • 1
  • So Chosen _is_ jquery lib, why not use it? You need additional input for search and filter results on change. There are plenty of these "combo inputs" libraries – Justinas Jan 22 '21 at 10:15
  • I am asked to try it without chosen library, I need to write the script – Harsha Penugonda Jan 22 '21 at 10:19
  • So you have example of how it should be, write code. Return to SO when you have error and can't google it out – Justinas Jan 22 '21 at 10:24

2 Answers2

0

if you have to use Third party jQuery than use Select2 https://select2.org/searching

mehul kalena
  • 62
  • 3
-1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="name">My best friend name:</label>
<input id="name" name="name" list="name-list" value="Szymon"/>

<datalist id="name-list">
    <option value="Albert">
    <option value="Szymon">
    <option value="Michał">
    <option value="Diana">
    <option value="Marek">
    <option value="Kuba">
</datalist>
Ravi Ashara
  • 1,177
  • 7
  • 16