如何在选择标签内添加功能搜索框答案

【问题标题】：How do i add functional search box inside select tag如何在选择标签内添加功能搜索框
【发布时间】：2021-01-22 19:08:48
【问题描述】：

我有一个选择下拉菜单并尝试在可用选项顶部添加搜索框，我找到了一种使用所选库的方法，但我想用 javascript 或 jquery 来实现它。

我该怎么做？

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

【问题讨论】：

所以选择 is jquery lib，为什么不使用呢？您需要额外的输入来搜索和过滤更改结果。有很多这样的“组合输入”库
我被要求在没有选择库的情况下尝试它，我需要编写脚本
所以你有它应该如何的例子，写代码。当您遇到错误并且无法搜索时返回 SO

标签： javascript html jquery css

【解决方案1】：

如果你必须使用第三方 jQuery 而不是使用 Select2 https://select2.org/searching

【讨论】：

【解决方案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>

【讨论】：

首先需要默认显示“选择”，搜索框作为选择后显示的选项之一
@HarshaPenugonda 设置value="Szymon" 并检查