How to Search Multiple Words at a Time with jQuery AJAX

Sometimes requires searching for multiple words and select records according to words matched instead of the exact words.

With only a single like operator, it is not possible to search for multiple words.

Require to split the search term and use it with or and like operators.

In this tutorial, I am using the jQuery UI library for displaying a suggestion list according to the search input.

Demo Download

Table structure
Configuration
HTML
PHP
jQuery
Demo
Conclusion

1. Table structure

I am using posts table in the example and added some records.

CREATE TABLE `posts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(200) NOT NULL,
  `content` text NOT NULL,
  `link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a config.php file for the database configuration.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. HTML

Create two <input type='text'> elements.

First is used for search value and another to display selected item id from the suggestion list.

Completed Code

<table>
   <tr>
      <td>Search Post</td>
      <td><input type='text' id='searchpost' ></td>
   </tr>

   <tr>
      <td>Post id</td>
      <td><input type='text' id='selectedpost_id' /></td>
   </tr>
</table>

4. PHP

Create ajaxfile.php file.

Explode the $search value by " ".

Loop on the $search_explode and use $condition_arr Array to store search condition on the title field.

Implode the $condition_arr by " or " and assign in $condition.

Initialize $response Array with the fetched records and return JSON response.

Completed Code

<?php

include "config.php";

if(isset($_POST['search'])){

  // Search value
  $search = $_POST['search'];

  // Explode by " " to get an Array
  $search_explode = explode(" ",$search);

  // Create condition
  $condition_arr = array();
  foreach($search_explode as $value){
      $condition_arr[] = " title like '%".$value."%'";
  }

  $condition = " ";
  if(count($condition_arr) > 0){
      $condition = "WHERE".implode(" or ",$condition_arr);
  }
 
  // Select Query
  $query = "SELECT * FROM posts ".$condition;

  $result = mysqli_query($con,$query); 
  while($row = mysqli_fetch_assoc($result) ){
      $response[] = array("value"=>$row['id'],"label"=>$row['title']);
  }
 
  echo json_encode($response);
}

exit;

5. jQuery

Initialize jQuery UI autocomplete on <input type='text' id='searchpost'>.

With source option load records according to search text by calling $.ajax request where pass the {search: request.term} as data. On successful callback pass the data in response(data).

The select option trigger when an option selected from the suggestion list. Assign label in $('#searchpost') and value in $('#selectedpost_id').

Completed Code

$( function() {
 
  $( "#searchpost" ).autocomplete({
    source: function( request, response ) {
 
      $.ajax({
        url: "ajaxfile.php",
        type: 'post',
        dataType: "json",
        data: {
          search: request.term
        },
        success: function( data ) {
          response( data );
        }
      });
    },
    select: function (event, ui) {
      $('#searchpost').val(ui.item.label); // display the selected text
      $('#selectedpost_id').val(ui.item.value); // save selected id to input
      return false;
    }
  });

});

6. Demo

View Demo

7. Conclusion

For multiple words search, you need to explode the search term by space (' ') and loop on the Array list to create the condition.

If you want to search on more than one field then again loop on search Array and initialize the condition Array.

If you found this tutorial helpful then don't forget to share.

Contents

1. Table structure

2. Configuration

3. HTML

4. PHP

5. jQuery

6. Demo

7. Conclusion