CODEWITHSUNDEEP
javascriptphphtmljqueryajax
user13964720
user13964720

Reputation:

AJAX live search is super slow

Edit: Im using XAMPP with built in Apache, vscode

I make a live search input(html>js>php>js>html) , it run smoothly at first key-in, but it's getting slower and slower when i delete and key-in again , wonder what's causing the delay and how to fix it.

And i have a question, For this example , it is better to use jquery or pure javascript?

Thank you

html

<div>
   <input type="text" class="search" placeholder="find..." autocomplete="off" autocapitalize="characters">
   <div class="result"></div>
</div>

js

$(document).ready(function(){
    $(document).on("keyup input",".search",function(){

        var input = $(this).val();
        var result = $(this).next(".result");

        if(input.length){
            $.get("table.php", {term: input}).done(function(data){
                result.html(data);
            });
        } else{
            result.empty();
        }
    });
});

php

<?php

$link = mysqli_connect("localhost", "root", "******", "crypto");

// Check connection
if($link === false){
    die("ERROR: " . mysqli_connect_error());
}

if(isset($_REQUEST["term"])){

    $coin = "show tables from crypto where Tables_in_crypto LIKE ?";

    //prepare the statement
    if($prepare = mysqli_prepare($link, $coin)){

        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($prepare, "s", $param_term);
        
        // Set parameters
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($prepare)){

            $result = mysqli_stmt_get_result($prepare);
            
            // Check number of rows in the result set
            if(mysqli_num_rows($result) > 0){
                
                // Fetch result rows as an associative array
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    echo "<p>" . $row["Tables_in_crypto"] . "</p>";
                }
            } else{
                echo "<p>no result</p>";
            }
        } else{
            echo "ERROR: $coin. " . mysqli_error($link);
        }
    }   
    // Close statement
    mysqli_stmt_close($prepare);
}
// close connection
mysqli_close($link);
?>
<script type="text/javascript" src="data.js"></script>

Upvotes: 1

Views: 829

Answers (2)

Naim R.
Naim R.

Reputation: 183

I don't deserve a credit for myself because everything i find mainly is on stackoverflow (after many hours spent) just I model everything to my own needs and like to give back in return.

If your page has no pagination a nice and easy way to live search all the items in javascript by doing the following (the html code may not be related to the script):

-you need to use XPath in chrome dev tools, to get the element needed:(right click on an element node->Copy -> copy full xpath) -lets say we want to search for all the <h2> text tags inside

  • : -in blade file we have products.blade.php:

    <html>
<body>
  <input type="text" placeholder="search" id="search" onkeyup="myFunction()"></input>
    <ul id="myList" class="myList-class">
    <li><h2>item 1<h2></li>
    <li><h2>item 2<h2></li>
  </ul>

    //the script below is not related to the tags above, but just to give you an idea.

        <script>
        function myFunction() {
            var lis = document.querySelectorAll('.columns-3.products.snip-ul > li');//get all the <li> tags, change it to your needs(get the value from Ranorex selocity extension in chrome).
            var x = document.getElementById("search").value; //item to search for(textbox)
            if (document.getElementById("search").value.length == 0) {        //if nothing is typed in textbox get all the products back
                lis.forEach(node=>node.setAttribute("style","display:flex")); // restore  all the display attribute to flex
                return;
            }
            for (var i = 1; li = lis[i-1]; i++) {
                var searchTitles = ((document.evaluate('/html/body/div[1]/ul/li[' + i + ']/div/div[2]/a/h2/text()', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue).data);
                 //change the above xpath to your own needs : (document.evaluate('XPATH HERE', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue).data;
                // li.parentNode.removeChild(li);
                if (searchTitles.toLowerCase().includes(x.toLowerCase())) {
                    document.evaluate('/html/body/div[1]/ul/li[' + i + ']', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.style = "display:flex";
                } else {
                    document.evaluate('/html/body/div[1]/ul/li[' + i + ']', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.style = "display:none"; //hide all <li> tags
                }
            }
        }
</script>

    Upvotes: 0

    • Roko C. Buljan
    Roko C. Buljan

    Reputation: 206028

    JavaScript

    • Don't use "keyup input", use just the "input" Event.
    • Trim $(this).val().trim() your input values, you don't want an empty space to trigger a search for data!
    • Cooldown! You don't want to perform an additional AJAX ($.get()) request while one is already on the way. Instead create a setTimeout throttle which - only once the user stopped typing for N milliseconds the request will be triggered.
      A pseudocode logic to picture it is quite simple:
    jQuery($ => { // DOM ready and $ alias in scope

  const search = ($input) => {

    const input = $input.val().trim();  // Trim your strings!
    const $result = $input.next(".result");

    if (!input) {
      $result.empty();
      return; // end it here
    }

    $.get("table.php", {term: input}).done((data) => {
      console.log(data); 
      // Exercise for the reader:
      // Make sure data is an Object
      // create "<p>" elements with text and populate $result
    });

  };

  let searchCooldown; // Search input cooldown

  $(document).on("input", ".search", function() {
    clearTimeout(searchCooldown); // clear occurring search timeout
    searchCooldown = setTimeout(() => {
      search($(this)); // will be triggered once user stops typing for 300ms
    }, 300); // 300ms seems like a good typing timeout?!
  });
});
    • No, you don't need jQuery. The Fetch API is mature enough.

    PHP

    • Don't place <script> tags inside a PHP file — which its only job should be querying the data from a database and returning it.
    • Don't return HTML from PHP! That's a waste. You might want a PHP file to return JSON data instead - that way it can be used by your HTML page, your watch, fridge, etc. It's usually done using echo json_encode($result);. If you need to attach also an "error" property to your $result data JSON, do so.

    Upvotes: 3

    Related Questions