PHP – Jquery Chosen Ajax Autocomplete Example
In this post we will give you information about PHP – Jquery Chosen Ajax Autocomplete Example. Hear we will give you detail about PHP – Jquery Chosen Ajax Autocomplete ExampleAnd how to use it also give you demo for it if it is necessary.
Hi Developer,
In this post, i would like to share with you how to create jquery ajax autocomplete using chosen library in php. i will give you simple jquery chosen ajax dynamically search using php. You can simple chosen populate ajax search with php, laravel, codeigniter etc using this example.
chosen is a popular jquery plugin that makes user-friendly select boxes with search. chosen is also support multi select. you can also easily customize chosen method and do it you want.
So, you have to just create “countries” table and then add some dummy records on it. after that we will create two php file, one for display form with select box and another for ajax. So let’s do it and you will get layout like as below screenshot.
Preview:
Step 1: Create Database Table
In fist step, we need to create database and table, so here i created “test” database and “countries” table with id and name column. You can simply create “countries” table as following sql query.
SQL Query:
CREATE TABLE IF NOT EXISTS 'countries' (
'id' int(10) unsigned NOT NULL AUTO_INCREMENT,
'name' varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;
Step 2: Create index.php
Here, we need to create index.php file and i created form with one input text box using chosen. I also write code for add more fields in jquery. So let’s create index.php file and put bellow code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP - Jquery Chosen Ajax Autocomplete Example - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div >
<div >
<div >PHP - Jquery Chosen Ajax Autocomplete Example - ItSolutionStuff.com</div>
<div >
<form>
<select >
<option>Select Option</option>
</select>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(".select-box").chosen();
$('.chosen-search input').autocomplete({
source: function( request, response ) {
$.ajax({
url: "ajaxpro.php?name="+request.term,
dataType: "json",
success: function( data ) {
$('.select-box').empty();
response( $.map( data, function( item ) {
$('.select-box').append('<option value="'+item.id+'">' + item.name + '</option>');
}));
$(".select-box").trigger("chosen:updated");
}
});
}
});
</script>
</body>
</html>
Step 3: Create ajaxpro.php File
In this step, we will write code for getting ajax data from database using mysql query. So you have to create ajaxpro.php and put bellow code:
ajaxpro.php
<?php
$hostName = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$mysqli = new mysqli($hostName, $username, $password, $dbname);
$sql = "SELECT * FROM countries WHERE name LIKE '%".$_GET['name']."%'";
$result = $mysqli->query($sql);
$response = [];
while($row = mysqli_fetch_assoc($result)){
$response[] = array("id"=>$row['id'], "name"=>$row['name']);
}
echo json_encode($response);
?>
Now you are ready to run example.
I hope it can help you…
Hope this code and post will helped you for implement PHP – Jquery Chosen Ajax Autocomplete Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs