如何使用实时搜索创建下拉多选答案

【问题标题】：How to create drop down multi select with live search如何使用实时搜索创建下拉多选
【发布时间】：2018-07-20 09:58:00
【问题描述】：

我必须在搜索中创建一个类似于 https://www.healthians.com/ 的功能，我们可以在其中选择 drom 下拉菜单，也可以键入并完成实时搜索。我已经使用了https://www.jqueryscript.net/form/Multiple-Select-UI-jQuery.html 这个 jquery 插件并且能够获得列表效果，但是如果我在结果区域中输入类型文本然后结果会显示在 div 中，那么实时搜索就会出现问题。

是否有任何 jquery 插件可以帮助我。

<div class="custom-result-section test" placeholder="Find Your Test" > </div>
<button class="tg-btn" type="submit"><i class="lnr lnr-magnifier"></i></button>

                                         </fieldset>
                                          <div class="div_search_box drop-down" style="display: none;">
                                             <span class="cross remove-icon "><img src="images/remove-icon.png" height="50px" width="50px"></span>

                                             <div class="jquery-multiple-select style="float:left;margin-right:50px;"  >
                                                <ul>
                                                  <?php foreach($featured_test as $faetur){  ?>
                                                       <li  data-test-id="<?php echo $faetur['id']; ?>" ><?php echo $faetur['name']; ?></li>

                                                  <?php } ?>


                                                </ul>
                                             </div>

                                             <div class="jquery-multiple-select " style="float:right;margin-right:30px;">
                                                <ul>

                                                  <?php foreach($labbogy_health_pkg as $faetur){  ?>
                                                       <li data-pkg-id="<?php echo $faetur['id']; ?>"><?php echo $faetur['name']; ?></li>
                                                  <?php } ?>

                                                </ul>
                                             </div>
                                          </div>

脚本

 $(".custom-result-section").on('click', function(){
         $('.div_search_box').css('display','block');   
    });
     $(".cross").on('click', function(){

        $('.div_search_box').css('display','none');

     });

// 让 div 可编辑

 $('.custom-result-section').each(function(){
    this.contentEditable = true;
});

【问题讨论】：

请看What topics can I ask about here?
投票结束此问题，因为：要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于 Stack Overflow 来说是题外话，因为它们往往吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。
@AniketSahrawat 好的..你能帮忙
很抱歉，添加 please 不会让我帮助您，除非您自己动手。你应该展示一些你有问题的努力和你的代码。这对 SO 来说是题外话。你需要发一个mcve。
现在我已经添加了代码.. 现在为什么 ppl 不赞成 ????

标签： javascript jquery html ajax

【解决方案1】：

你为什么不使用引导程序并使用这样的代码

          <li class="dropdown">
              <a href="#" class="btn btn-info dropdown-toggle" data-
              toggle="dropdown" role="button" aria-haspopup="true" aria-
              expanded="false">Destination <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Los Angeles</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">New York</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Miami</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">San Francisco</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Las Vegas</a></li>
              </ul>
            </li>

【讨论】：