使用 jquery 过滤的搜索框

Question

我正在尝试使用 bootstrap 和 jquery 为我的数据库编写一个搜索框，因为我想过滤结果 dropdown-items 所以这就是我所尝试的

 <div class="row justify-content-center">
     <div class="form-group">
         <!-- <span style="font-family:Sultan-Koufi; font-size:27px;">???? ?? ???? ????? ?????? ??? ????? ?? ???? ??? ??????? ????????? ?? ?????? ??????? ?? ???? ? ?? ??????</span> -->
         <input class="form-control dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true"
                autocomplete="off" aria-expanded="false" id="myInput" dir="RTL" type="text" style="width:50vh;"placeholder="?????..">
         <br>
         <div class="dropdown-menu dropmenu" id="myList" name="myList" style="height:auto; width:50vh;"aria-labelledby="myInput">
             <ul class="dropdown-menu-list list">
                 <?php foreach($items as $newitem){?>
                 <li>
                     <a class="dropdown-item" href="#"><div class="row"><div class="col-sm-4" style="font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:25px;"><?=$newitem['name'];?>&nbsp;</div><div class="col-sm-4" style="font-family:hana; font-size:25px;"><?=$db->getArabicName($newitem['ownedcom']);?></div><div class="col-md-3" style="font-family:Tahoma;">30<span style="font-family:JerseyM54-aLX9;">LYD</span></div></div></a>
                     <div class="dropdown-divider"></div>
                 </li>

                 <?}?>
             </ul>
         </div>
     </div>
 </div>
 <script src="..\js\functions\searchengine.js"></script>

我还想在点击它时用项目名称填充搜索框 searchengine.js

$(document).ready(function(){
    $("#myList li").hide();
    $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
    $("#myList li").show();
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      if($('#myInput').val() == ''){
        $("#myList li").hide();

      }
    });
  });
});
function Alert(){
    $("#myInput").val($("#myList").text());
    alert("Tesst");
}