如何在 select 标签内添加功能搜索框

Question

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?

 .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" />

Answer 1

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

Answer 2

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