Creating Autocomplete or Search Suggestion Functionality with PHP and MySQLi

Creating Autocomplete or Search Suggestion Functionality with PHP and MySQLi

In this Post We Will Explain About is Creating Autocomplete or Search Suggestion Functionality with PHP and MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Ajax Autocomplete textbox using jQuery, PHP and MySQLi Example

In this post we will show you Best way to implement Autocomplete textbox using jQuery, PHP and MySQLi, hear for jquery autocomplete multiple fields using jquery ajax php and MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Make a Database and table

first of all open your server LIKE as a localhost/phpmyadmin as well as open your sql tab and execute the below scripts sql query command Like as

Also Read :   Angularjs Convert Comma separated String To Array Example

Create Database live24u ;

CREATE TABLE IF NOT EXISTS students(
 id int(11) NOT NULL AUTO_INCREMENT,
 student_name varchar(555) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ;

CDN Include Jquery library, jQuery UI

In this all the CDN file, at the start step by step, we had some included the 3 files Like as a main Jquery CDN,and then jQuery UI as well as jQuery CSS which you can here path to download.

<link rel="stylesheet" href="smoothness/jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="1.11.4/jquery-ui.js"></script>

textbox.php

And then also in the below source code, I have used jquery plugin Like the “ui-widget” main css class to created the text field jquery dropdown menu which data contains the ul li list ofsearch or autocomplete suggestions.

Also Read :   AngularJS Login with PHP MySQLi

<!Doctype html>
<html>
<head><title>jQuery Autocomplete Textbox using PHP and MySqli</title>
<meta charset="utf-8">

<link rel="stylesheet" href="1.11.4/themes/smoothness/jquery-ui.css">
<!--including jQuery library-->
<script src="jquery-1.10.2.js"></script>
<!--including jQuery UI library-->
<script src="1.11.4/jquery-ui.js"></script>


 <script>
 $(function(){
 $("#students").autocomplete({
 source: 'get_student.php'
  });                                     //live24u end of autocomplete function
 });
 </script>
 <!--live24u end of Jquery-->
</head>


<body>
<!--live24u jquery ui-widget is using-->
<div class="ui-widget">
<label for="students">Search Students:</label>
<input id="students" type="text" />
</div>
</body>
</html>

get_student.php

get_student.php we had used the simple PHP Latest version mysqli procedural methods to database connect with the database ‘live24u’ and sql query to select or particuler str the data contents from the student_name field of table ‘student_name’ and then save the records display one-by-one in an array asc associative array and then Last step display all the records using PHP json_encode() function.

Also Read :   AngularJS Search Auto Suggestion box with PHP MySQLi

<?php
$host="localhost";
$username="USER_NAME";
$password="YOUR_PASSS";
$dbname="live24u";

//make a database connection with dbname
$db_conn=mysqli_connect($host,$username,$password,$dbname);
if(!$db_conn)
{
 die("error in establishing connection: ". mysqli_connect_error());
}


$querysearch=$_GET['term'];
$lstsql="SELECT * from students WHERE student_name LIKE '%".$querysearch."%' ORDER BY student_name ASC";

$studresult=mysqli_query($db_conn,$lstsql);

while($myrow=mysqli_fetch_assoc($studresult))
{
 //Save and storing all the values of 'student_name' field one by one in PP an array
 $livedata[]=$myrow['student_name'];
}

//return json livedata
echo json_encode($livedata);
 
//end of php code
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Autocomplete textbox using jQuery, PHP and MySQLi And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.