Click here to Skip to main content
15,446,510 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm Trying to code a Search box for my database using bootstrap and jquery because I want to filter the result dropdown-items so that is what I have tried

What I have tried:

$dbCon = "mysql:host=$host;dbname=$db_name";
$PDOCon = new PDO($dbCon, $username, $password);
$ot = $PDOCon->prepare("SELECT * FROM `items`");  
//$draftitems->bindParam(':draft', $draftid);
$items = $ot->fetchAll(PDO::FETCH_ASSOC);


<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="?????..">
                               <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){?>
                               <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'];?> </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>

                   <script src="..\js\functions\searchengine.js"></script>


    $("#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(){
Updated 2-Aug-21 0:23am
Chris Copeland 2-Aug-21 4:11am    
What isn't working with the code you've provided? We need some context on whether you're receiving an error, or whether it's just not behaving as you would expect. We can't see what happens on your screen when you run this code, so we can't know what the output of running it is!
MohammedZr 2-Aug-21 5:44am    
The code is not filtering the list items

1 solution

There's a couple of issue with the code that needs to be addressed. First and foremost:
$("#myList li").filter(function() {
$("#myList li").show();

For every li element, you're making a call to show all li elements. This means that if you have 3 elements and the first two do not contain the text you're searching for, the third element will still tell the page to show them. What you probably need to do is either remove the show() line altogether, or move it outside of the filter() function as so:
$("#myList li").show();
$("#myList li").filter(function() {

Another point is you probably don't want to use the filter() function but instead use each()[^] as you're not actually doing anything with the resulting object.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900