jQueryUi autocomplete dropdown with PHP AND JSON

jQueryUi autocomplete dropdown with PHP AND JSON

Yesterday when i was working for my client website (Want Me To Build your Dream website). I was developing a autocomplete dropdown search but their was one problem when someone press pagedown key it does not select the result, So i was search for its solution. Then i found jQueryUi autocomplete dropdown and it was the exactally the thing that i was looking. So lets start and build a jQueryui autocomplete dropdown with PHP AND JSON

jQueryUi autocomplete dropdown with PHP AND JSON


their is not special stuff in the markup. We have a div .ui-widget and inside that dive we have a input box #country and we have included the jQueryUi theme

<!DOCTYPE html>
	<title>jqueryui autocomplete dropdown with PHP AND JSON</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		<h1>jQueryUi autocomplete dropdown with PHP AND JSON</h1>
		<div class="ui-widget">
	  		<label for="country">Country Search: </label>
	  		<input id="country">


before the ending body tags we will put jQuery & jQueryUi files then we will be writing your autocomplete dropdown search functionality. We will select the input box with id #country and attach the .autocomplete function with source: "search_page.php" the source will have the php page from which the search results will come, in json format

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
  			source: "country.php"


Create a table countries

  `id` int(11) NOT NULL,
  `country_name` varchar(100) NOT NULL DEFAULT ''

Put countries into the table

INSERT INTO `countries` (`id`, `country_name`) VALUES
(1, 'United States'),
(2, 'Canada'),
(3, 'Afghanistan'),
(4, 'Albania'),
(5, 'Algeria'),
(6, 'American Samoa'),
(7, 'Andorra'),
(8, 'Angola'),
(9, 'Anguilla'),
(10, 'Antarctica'),
(11, 'Antigua and/or Barbuda'),
(12, 'Argentina'),
(13, 'Armenia'),
(14, 'Aruba'),
(15, 'Australia'),
(16, 'Austria'),
(17, 'Azerbaijan'),
(18, 'Bahamas'),
(19, 'Bahrain'),
(20, 'Bangladesh');

ALTER TABLE `countries`


In this page we will perform the real search.

  1. We are connecting to the database
  2. We are checking if we are successfully connected to the database else we will be showing a error message
  3. We are waiting for search request
  4. Splitting the search term into an array with preg_split()
  5. Generating the search query
  6. Performing query& fetching result from the database and storing result in the $result array
  7. Displaying $result array in json format
	//try to connect to the database
	$con = mysqli_connect("localhost","root","","autocomplete_search");

	//check connection
		echo "Failed to connect to the database". mysqli_connect_error();

	//country search
		$term = trim(htmlentities(mysqli_real_escape_string($con, $_GET&#91;'term'&#93;)));
		//break $search
		$search = preg_split('/&#91;\s&#93;+/', $term);
		$term_count = 0;
		$q = "SELECT * FROM `countries` WHERE ";
		$result = array();

		//create search query
		foreach ($search as $s) {
			if($term_count == 1){
				$q .= "`country_name` LIKE '%$s%'";
				$q .= " AND `country_name` LIKE '%$s%'";

		//fetch the data from the database
		$query = mysqli_query($con,$q);
		while($row = mysqli_fetch_assoc($query)){
			$result&#91;&#93; = array(
				'label' => $row['country_name']);

		//show the result in json format
		echo json_encode($result);

4 thoughts to “jQueryUi autocomplete dropdown with PHP AND JSON”

  1. Greate article. Keep writing such kind of info on your site.
    Im really impressed by it.
    Hello there, You have performed a great job. I’ll certainly digg it and individually recommend to my friends.
    I’m sure they will be benefited from this website.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.