Creating a dynamic search bar using Ajax with support for multiple keywords

Question

Creating a dynamic search bar using Ajax with support for multiple keywords

I recently attempted to create an ajax search bar for my website. It functions perfectly with a single keyword, however, I'm facing some difficulty when trying to make it work with two keywords. I thought about parsing the data in the input field, but due to my limited knowledge, I haven't been able to find a solution. Do any of you have any ideas on how to tackle this issue?

In the main.js file, I'm retrieving the data from the input as shown below:

var kwVal = $(this).val();
if (kwVal.length < 3){
    $(".clothes-container").html("");
}
else {
    $.ajax({
        "url": "ajax/getclothes.php",
        "type": "GET",
        "data": {
            "kw": kwVal 
        }
    })

Here is my SQL query:

$sql = "SELECT title, description, picture
    FROM outfit 
    WHERE type LIKE :keyword OR
          color LIKE :keyword OR
          brand LIKE :keyword OR
          material LIKE :keyword";

Thank you in advance for any assistance you can provide.

javascript mysql ajax database

Answer 1

Answer №1

Do you think something along these lines? Definitely, make sure to properly escape all SQL literals and strings, especially the $keyword.

// Grabbing keywords from user input
$keywords = array('red', 'shoes');

// Specifying columns to match against
$columns = array('type', 'color', 'brand', 'material');

// Creating conditions for each keyword
$word_conditions = array();
foreach ($keywords as $keyword) {

    $conditions = array();
    foreach ($columns as $column)
        $conditions[] = $column.' LIKE \'%'.$keyword.'%\'';

    $word_conditions[] = '('.implode(' OR ', $conditions).')';
}

// Crafting the query to require all keywords for each item
$query = 'SELECT * FROM ... WHERE '.implode(' AND ', $word_conditions);

Answer 2

Do you think something along these lines? Definitely, make sure to properly escape all SQL literals and strings, especially the $keyword.

// Grabbing keywords from user input
$keywords = array('red', 'shoes');

// Specifying columns to match against
$columns = array('type', 'color', 'brand', 'material');

// Creating conditions for each keyword
$word_conditions = array();
foreach ($keywords as $keyword) {

    $conditions = array();
    foreach ($columns as $column)
        $conditions[] = $column.' LIKE \'%'.$keyword.'%\'';

    $word_conditions[] = '('.implode(' OR ', $conditions).')';
}

// Crafting the query to require all keywords for each item
$query = 'SELECT * FROM ... WHERE '.implode(' AND ', $word_conditions);

Answer 3

Answer №2

If your keywords are separated by spaces, for example, "ABC DEF GEH."

Then, on the server side, you can do the following:

$keywords = explode(" ", $_POST['data']); // Convert to array
$string = implode(",", $keywords);

$sql = "SELECT title, description, picture
    FROM outfit 
    WHERE type in (".$string.") OR
          color in (".$string.") OR
          brand in (".$string.") OR
          material in (".$string.")";

Answer 4

If your keywords are separated by spaces, for example, "ABC DEF GEH."

Then, on the server side, you can do the following:

$keywords = explode(" ", $_POST['data']); // Convert to array
$string = implode(",", $keywords);

$sql = "SELECT title, description, picture
    FROM outfit 
    WHERE type in (".$string.") OR
          color in (".$string.") OR
          brand in (".$string.") OR
          material in (".$string.")";

Creating a dynamic search bar using Ajax with support for multiple keywords

Answer №1

Answer №2

Similar questions

CSS translation animation fails to execute successfully if the parent element is visible

The useMutation function trapped in an endless loop

What could be causing my mongoose array to remain empty without any values being stored in it?

What strategies can be implemented to transform a lengthy if-else statement into a more optimized

Comparing the size of a MongoDB array to another field in a document: how can it be done?

Issue at hand: Unexpected error 500 encountered while sending AJAX request to PHP script through

The instance is referencing "greet" during render, but it is not defined as a property or method

Optimizing the If operator in JavaScript to function efficiently without causing the page to reload

Troubleshooting: AngularJS - Issues with nested controllers not functioning properly within ng-include

What is the process for sending a data response with express?

Front-end procedural logic for increasing identification values

Guide on sending a post request to a PHP component

Child component in Angular fails to detect input changes

Creating route paths within a single .js file

Turn off link preview feature on Android messages

Navigating a local and server environment with relative paths in a web server's multiple sites

Can someone please provide me with the correct syntax for a jQuery AJAX PUT request that is JSON encoded?

Changes made to the V-model property will only be reflected after the page is refreshed

Detection of NTLM error during the parsing of the Authorization header

Using jQuery to apply CSS to elements with multiple potential values