How can I add Automatic intellisense to a Textbox using Jquery

I want to add automatic Intellisense (Auto Complete–Filtering Search Result) to a textbox, corresponding to the words that I’m typing in that textbox and the Intellisense is fetched from a database table. How can I achieve this? Can anyone help?

Here is my jQuery code:

$(document).ready(function() {       
    $('#city').autocomplete({
       source:'send.php'
    });
});

send.php file given below:

$link=mysqli_connect("localhost","hari","123","hari");
    
$searchTerm = $_GET['query'];  //get search term
    

$query = $db->query("SELECT fname FROM user WHERE fname LIKE 
         '%".$searchTerm."%' ORDER BY fname ASC");  //get matched data from user table

while ($row = $query->fetch_assoc()) {
        $data[] = $row['fname'];
}
        
echo json_encode($data);//return json data

Corresponding HTML Code is given below:

<div class="content col-sm-12">
   <form>
      <h1>Hello!!!</h1>
      <input type="text" id="city" name="city" size="20" class="city" 
             placeholder="Please Enter City or ZIP code"><br><br>    
   </form>
</div>

Answer

You have to include the following scripts in your html page

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

And add the following css in head of your html

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

The mistake you made is the parameter passing with the name term and trying to read with the name query in your php file. In your send.php file change the line

$searchTerm = $_GET['query'];

into

$searchTerm = $_GET['term'];

Advertisement

Answer