JQuery EasyAutoComplete - Create Input Search Form With Auto Complete Suggestion
15-04-2018
Easy-Autocomplete is a Jquery Library that facilitates making an input form with autocomplete suggestions. So, using Jquery easy autocomplete library, we can make input form with autocomplete feature easily.
When we make an input search field, it's a good idea to give suggestions based on what the user is typing in the input form. For example, there is an input form to enter the country, When the user type 'Ind', we can give suggestions like 'India, Indonesia'. The suggestion comes from another file in the form of JSON. Here, in this blog, we will see how to make a form with autocomplete feature using Jquery, Jquery-EasyAutoComplete, PHP & MySQL step-by-step. In the last of the blog, I'll also give a Download link that contains PHP files and a SQL file with a proper working demo example. To get started with the journey, let's create an input form first with ID, and also we will add Easy-Autocomplete CSS and Javascript library
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Easy AutoComplete</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/easy-autocomplete.min.css" />
<script type="text/javascript" src="js/jquery.easy-autocomplete.min.js"></script>
</head>
<body>
<h1>JQuery EasyAutocomplete</h1>
Enter Name [ex: taohid, sajid] : <input type="text" id="name" autocomplete="off">
<script type="text/javascript">
var options = {
url: "users.php",
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#name").easyAutocomplete(options);
</script>
</body>
</html>
In the above example, we have an input box with id name in which we will type a user name, while typing the user name, there will autocomplete feature which will suggest the name of the user exists in the database. Suggestions is coming from users.php. In users.php, we will fetch all usernames from the database table and we will decode the users in the JSON object. name of JSON object will be name. Inside javascript tag , we can see the code getValue: "name", here name is the JSON Object name coming from users.php
Create Database, Table and Insert Records
Let's create a database and table. and insert some records in the table so that the suggestion will be shown in autocomplete by fetching table records.
CREATE DATABASE easy_autocomplete;
CREATE TABLE users(
id INT(10) NOT NULL AUTO_INCREMENT,
name VARCHAR(200) NOT NULL ,
PRIMARY KEY (id)
);
INSERT INTO users SET name='taohid';
INSERT INTO users SET name='sajid';
user.php File
<?php
$connection = new MySQLi('localhost','root','','easy_autocomplete');
$sql = "SELECT name FROM users";
$rows = $connection->query($sql);
$arr = [];
while ( $res = $rows->fetch_assoc() ) {
$arr[]['name'] = $res["name"];
}
print(json_encode($arr));
?>
Download Source Code With Database
