Create an Auto-Suggest Drop Down Field using Ajax and PHP

In this tutorial, we will create an auto-complete drop down list.

The text box will take users input and suggest sentences with the available characters.

For this, we will be using PHP codes, AJAX as well as JS libraries like JQueryUI and Jquery as well.

Overview

To continue with the tutorial, we will need to create and save the following files all in the same directory.

  • Index.php
  • Autocomplete.php
  • Autocomplete.js
  • Autocomplete.css

Database Schema

In this section, we will create a database to store some value to suggest. I will name my database “autocomdb”. You can name yours accordingly.

After creating a database, Add tables to your database. Add a table named “posts”, then insert some sample values to it.

You can freely use the script to create one for yourself.

CREATE TABLE IF NOT EXISTS `posts` (
`url` varchar(200) NOT NULL,
`post_title` varchar(200) NOT NULL,
`date_published` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `posts` (`url`, `post_title`, `date_published`) VALUES
('www.google.com', 'google', '2016-01-15 13:06:12'),
('www.google-value.com', 'google-value', '2016-01-15 13:42:54');

Index.php

The index file contains all the JS and CSS Script file imports as well as the input text field where the user will type the keyword to search.

<html>
<head>
<title>Tutorial-30</title>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="autocomplete.css">
<script type="text/javascript" src="jquery/jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>

</head>

<body>
<div align="center">
<input type="text" id="topic_title">
</div>
</body>

</html>

Autocomplete.php

In this file. codes will take the word typed in the previous page(index page) via Method GET and it will be passed to a local variable which is then used to append into an array.

Then it will check if the input contains characters other than letters or digits. If any special character is found array will be encoded into a JSON with a label saying an error and will be sent back to the user.

If the term is valid, it will be sent to compare with the entries in the database and the results will be pushed to a new array using a while loop to assign them into correct key-value pairs.

Then, that array will be JSON encoded and send for the front end to generate as a drop down list containing suggestions

<?php

require_once 'local_utils.php';

$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
if(!$isAjax) {
$user_error = 'Access denied - not an AJAX request...';
trigger_error($user_error, E_USER_ERROR);
}

$term = trim($_GET['term']);

$a_json = array();
$a_json_row = array();

$a_json_invalid = array(array("id" => "#", "value" => $term, "label" => "Only letters and digits are permitted..."));
$json_invalid = json_encode($a_json_invalid);

// replace multiple spaces with one
$term = preg_replace('/\s+/', ' ', $term);

if(preg_match("/[^\040\pL\pN_-]/u", $term)) {
print $json_invalid;
exit;
}

$conn = new mysqli("localhost", "root", "", "autocomdb");

if($conn->connect_error) {
echo 'Database connection failed...' . 'Error: ' . $conn->connect_errno . ' ' . $conn->connect_error;
exit;
} else {
$conn->set_charset('utf8');
}

$parts = explode(' ', $term);
$p = count($parts);

/**
* Create SQL
*/
$a_part_to_search = array();
$a_parts = array();
$part_type = "";
for($i = 0; $i < $p; $i++) {
$part_type .= 's';
}
$a_parts[] = & $part_type;

foreach($parts as $part) {
array_push($a_part_to_search, '%' . $part . '%');
}
for($i = 0; $i < $p; $i++) {
$a_parts[] = & $a_part_to_search[$i];
}

$sql = 'SELECT url, post_title FROM posts WHERE date_published is not null ';
for($i = 0; $i < $p; $i++) {
$sql .= ' AND post_title LIKE ?';
}

/* Prepare statement */
$stmt = $conn->prepare($sql);
if($stmt === false) {
$user_error = 'Wrong SQL: ' . $sql . '<br>' . 'Error: ' . $conn->errno . ' ' . $conn->error;
trigger_error($user_error, E_USER_ERROR);
}

/* Bind parameters. TYpes: s = string, i = integer, d = double,  b = blob */
//$stmt->bind_param('s', $param); does not accept params array
call_user_func_array(array($stmt, 'bind_param'), $a_parts);

/* Execute statement */
$stmt->execute();

$stmt->bind_result($url, $post_title);

while($stmt->fetch()) {
$a_json_row["id"] = $url;
$a_json_row["value"] = $post_title;
$a_json_row["label"] = $post_title;
array_push($a_json, $a_json_row);
}

// highlight search results
$a_json = apply_highlight($a_json, $parts);

$json = json_encode($a_json);
print $json;
?>

Autocomplete.js

The codes in the file are used to build the URL when a user clicks on a suggestion (optional)

$(function() {

$("#topic_title").autocomplete({
source: "autocomplete.php",
minLength: 2,
select: function(event, ui) {
var url = ui.item.id;
if(url != '#') {
location.replace =url;
}
},

html: true,

open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});

});

Autocomplete.css

The codes below are design CSS codes that add design to the suggestions in the auto-suggest list.

/* highlight results */
.ui-autocomplete span.hl_results {
background-color: #ffff66;
}

/* loading - the AJAX indicator */
.ui-autocomplete-loading {
background: white url('../img/ui-anim_basic_16x16.gif') right center no-repeat;
}

/* scroll results */
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding for vertical scrollbar */
padding-right: 5px;
}

.ui-autocomplete li {
font-size: 16px;
}

/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 250px;
}

Bonus

You can download the Full source code here.

If you face any challenge during the process feel free to comment or direct a mail I would happy to help you.
If you find this post helpful don’t forget to share it with your friends and community.

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

3 thoughts on “Create an Auto-Suggest Drop Down Field using Ajax and PHP

    1. Thankyou Arup for the remainder I have updated the link. Please check. Let me know how it goes after the download. I would be glad to help in further tutorials.

    2. Thank you Arup for the remainder I have updated the link. Please check. Let me know how it goes after the download. I would be glad to help in further tutorials.

Comments are closed.