Styjun

I'm setting up a basic AJAX live search for my website but I am encountering an issue where sometimes the whole value of my search box is not being captured properly.

For instance, if I type 'roll' into the search box, sometimes it will return the values for 'ro' instead. This is the most common occurrence as seen here: https://imgur.com/a/u1vLhuz

I say most common occurrence because in the link above, you will see different values captured even though 'roll' is the value of search box for each result. The last image being the desired result. It's as if I type the value in too fast, because I can not reproduce the issue when slowly typing each character.

In desperation I have tried different events, such as keyup, keydown, changed, keypress .on('Keyup') etc. Logging the javascript variable to the console shows the incorrect value, so the sql statement is obviously returning the wrong results (as seen in the album above).

My index.php basically consists of every result before anything is searched:

<ul id="search-results" class="grid cs-style-2 justify-content-center">
 $cosmetic->getCard($result);
</ul>

Here is the gist of my ajax.php file:

if (isset($_POST['search'])) 
 $search = $_POST['search'];
 $sql = "SELECT * FROM Cosmetics WHERE Name LIKE '%$search%' OR Type LIKE '%$search%' OR Rarity LIKE '%$search%' OR CostOrigin LIKE '%$search%' OR ImageName LIKE '%$search%' ORDER BY FIELD(Rarity,'legendary','epic','rare','uncommon','common'), Name";
 echo($sql);
 $result = $connection->query($sql);
 $cosmetic->getCard($result);

and here is the script.js file that is included in the index.php:

$(document).ready(function() 
 $("#search").on("keyup", function() 
 var name = document.getElementById("search").value;
 console.log(name);
 if (name !== " ") 
 $.post('/test/ajax.php',search:name, function(data)
 $("#search-results").html(data);
 );
 
 );
);

In this album: https://imgur.com/a/u1vLhuz I expect the results to be the last image where it actually queries the correct word, instead of capturing other or no values from the search box.

This query should output them in the correct order.
First items: Exact match to search term
Next items: Items that start with search term
Third items: All items that include search term

SELECT * 
FROM Cosmetics 
WHERE Name LIKE '%$search%' 
ORDER BY (CASE WHEN name = '$search' THEN 1 WHEN name LIKE '$search%' THEN 2 ELSE 3 END);