How to Search Multiple Words at a Time with jQuery AJAX

Sometimes requires to search 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 jQuery UI library for displaying suggestion list according to search input.


Contents

  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. jQuery
  6. Demo
  7. Conclusion

 


 

1. Table structure

I am using posts table in the example.

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 new config.php file.

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 a new 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

Initailize 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

Enter some text in the first textbox. e.g. jQuery AJAX, file upload, how to, etc.


 

7. Conclusion

For the 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 find this tutorial, helpful then don’t forget to share.

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

3 Comments

  1. Ram said:

    Great brother continue

    July 26, 2018
    Reply
  2. Jason L said:

    I’m getting undefined index ‘search’. Can you help please?

    October 30, 2018
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *