Question

我必须在搜索中创建类似于此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;
});

Answer 1

为什么不使用bootstrap并使用像这样的代码

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

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

1 个答案: