二级关联之下拉显示选项之模糊搜索

最新推荐文章于 2023-06-08 10:56:51 发布

原创

最新推荐文章于 2023-06-08 10:56:51 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#linkage

本文介绍了一个HTML下拉菜单实现模糊搜索和二级关联显示的功能。当输入公司名称时，会进行模糊查询并显示最多10个匹配项。选定公司后，将自动显示出该公司的站点列表。通过JavaScript的事件监听来处理动态添加的元素，确保功能的正常运行。

效果如下：1.当输入公司部分名称是，模糊查询显示10项；

2.当公司选定后，即显示当前公司名下的站点

如果这是你想要或相近的效果，请继续。

先上html，主要是公司和站点部分：

<div class="main_in_search_item">
    <div class="main_in_search_item_text">公司：</div>
    <input class="main_in_search_input_text" id="chooseCompany" name="chooseCompany" onkeyup="showCompany();" />
    <div class="chooseCompanySelect" id="chooseCompanySelect"  ></div>
    <input type="hidden" id="hiddeninput"/>
</div>
<div class="main_in_search_item">
    <div class="main_in_search_item_text">站点：</div>
    <input class="main_in_search_input_text" id="chooseNDID" name="chooseCompany"  onclick="showNDID();"/>
    <