Chosen Ajax Autocomplete Textbox using jQuery, PHP – Technology
In this post we will give you information about Chosen Ajax Autocomplete Textbox using jQuery, PHP – Technology. Hear we will give you detail about Chosen Ajax Autocomplete Textbox using jQuery, PHP – TechnologyAnd how to use it also give you demo for it if it is necessary.
Today, We want to share with you Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL.In this post we will show you Autocomplete Textbox using jQuery, PHP and MySQLi, hear for Ajax PHP MySQL Creating Autocomplete Search Suggestion we will give you demo and example for implement.In this post, we will learn about PHP Autocomplete Input tags with Dynamic Data using jquery Ajax
with an example.
Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL
There are the Following The simple About Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL Full Information With Example and source code.
As I will cover this Post with live Working example to develop Jquery Chosen plugin – dynamically populate list by Ajax, so the PHP – Jquery Chosen Ajax Autocomplete for this example is following below.
Step 1: Make a MySQL Database Table
Lest start, I want to make MySQL database and table, therefor here i made “products” database and “products” table with product id as well as product name column. We can simply make MySQL “products” table as following simple sql query.
SQL Query:
CREATE TABLE IF NOT EXISTS 'products' (
'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: Make index.php
List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.
Now, I want to make simple root PHP index.php file as well as i made form with one HTML input text box using jquery chosen. I also some easy source code for multiple add more fields in jquery examples. therefor let’s make simple index.php file and put some bellow source code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chosen autocomplete with PHP and AJAX - onlinecode</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>
<h1>jQuery Chosen autocomplete with PHP and AJAX</h1>
<div >
<div >
<div >jQuery Chosen autocomplete with PHP and AJAX - onlinecode</div>
<div >
<form>
<select >
<option>Select Products</option>
</select>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(".select-box").chosen();
$('.chosen-search input').autocomplete({
source: function( request, response ) {
$.ajax({
url: "request_ajax.php?name="+request.term,
dataType: "json",
success: function( data ) {
$('.select-box').empty();
response( $.map( data, function( product ) {
$('.select-box').append('<option value="'+product.id+'">' + product.name + '</option>');
}));
$(".select-box").trigger("chosen:updated");
}
});
}
});
</script>
</body>
</html>
Step 3: Create request_ajax.php File
In this Last step, I shall simple source code for fetching PHP jquery ajax data from MySQL database using simple mysql query. Therefor We have to make a simple request_ajax.php and put bellow some source code:
request_ajax.php
<?php
$hostName = "localhost";
$username = "root";
$password = "jaydeepGondaliya";
$dbname = "products";
$mysqli = new mysqli($hostName, $username, $password, $dbname);
$sql = "SELECT * FROM products WHERE name LIKE '%".$_GET['name']."%'";
$all_result = $mysqli->query($sql);
$data_response = [];
while($row = mysqli_fetch_assoc($all_result)){
$data_response[] = array("id"=>$row['id'], "name"=>$row['name']);
}
echo json_encode($data_response);
?>
Angular 6 CRUD Operations Application Tutorials
Read :
- Technology
- Google Adsense
- Programming
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Chosen Ajax Autocomplete Textbox using jQuery, PHP and MySQL.
I would like to have feedback on my onlinecode blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.
Hope this code and post will helped you for implement Chosen Ajax Autocomplete Textbox using jQuery, PHP – Technology. 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