PHP – Bootstrap autocomplete tokenfield with Ajax Example

PHP – Bootstrap autocomplete tokenfield with Ajax Example

In this post we will give you information about PHP – Bootstrap autocomplete tokenfield with Ajax Example. Hear we will give you detail about PHP – Bootstrap autocomplete tokenfield with Ajax ExampleAnd how to use it also give you demo for it if it is necessary.

In this post, i am share with you example of how to make tokenfield autocomplete with ajax in PHP. I will give you very simple example so you can easily use with your core PHP Project and other framework like Laravel, codeigniter etc.

Here in this example we use Bootstrap tokenfield plugin for tags ajax autocomplete. tokenfield plugin is advanced tagging/tokenizing plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support. tokenfield plugin also provide typeahead js for tags autocomplete, But it this example i use jquery ui for autocomplete ajax.

In this example i use following files for css and js that way we can make simple example:

1) bootstrap.min.css

2) jquery.min.js

3) jquery-ui.min.css

4) jquery-ui.min.js

5) bootstrap-tokenfield.min.css

6) bootstrap-tokenfield.js

Ok, so let’s follow to create just two php files and make example like as bellow preview:

Preview:

Before create two fies as example we have one “tags” table input your database like as bellow screen shot:

tags table

Create index.php File

<!DOCTYPE html>

<html>

<head>


<title>PHP - Bootstrap autocomplete tokenfield with Ajax Example</title>


<!-- Css Files-->

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">


<!-- JS Files -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>


</head>

<body>


<div >

<input type="text" id="tokenfield" />

</div>


<script type="text/javascript">

$('#tokenfield').tokenfield({

autocomplete: {

source: function (request, response) {

jQuery.get("ajaxpro.php", {

query: request.term

}, function (data) {

data = $.parseJSON(data);

response(data);

});

},

delay: 100

},

showAutocompleteOnFocus: true

});

</script>


</body>

</html>


Create ajaxpro.php File

<?php


define (DB_USER, "root");

define (DB_PASSWORD, "root");

define (DB_DATABASE, "test");

define (DB_HOST, "localhost");


$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);


$sql = "SELECT name FROM tags

WHERE name LIKE '%".$_GET['query']."%'

LIMIT 10";


$result = $mysqli->query($sql);


$json = [];

while($row = $result->fetch_assoc()){

$json[] = $row['name'];

}


echo json_encode($json);

?>

After created successfully both files, you can run by following command:

Also see:PHP – Input multiple tags with dynamic autocomplete example

php -S localhost:8000

Now you can open your browser and run this link : http://localhost:8000

You can get more information about bootstrap tokenfield plugin from here : Tokenfield.

I hope it can help you…

Hope this code and post will helped you for implement PHP – Bootstrap autocomplete tokenfield with Ajax 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

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

16  +    =  19

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US