How do I make a search box with filter using jquery

Question

0.00/5 (No votes)

See more:

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:

PHP

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

?>

PHP

<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'];?> </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>
                   </center>
               </div>

searchengine.JS

JavaScript

$(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");
}

Posted 1-Aug-21 4:35am

MohammedZr

Updated 2-Aug-21 0:23am

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Chris Copeland · Accepted Answer · 2021-08-02T00:23:00

There's a couple of issue with the code that needs to be addressed. First and foremost:

JavaScript

$("#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:

JavaScript

$("#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.

How do I make a search box with filter using jquery

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us