PHP Bootstrap – dynamic autocomplete tag input using jquery plugin

PHP Bootstrap – dynamic autocomplete tag input using jquery plugin

In this post we will give you information about PHP Bootstrap – dynamic autocomplete tag input using jquery plugin. Hear we will give you detail about PHP Bootstrap – dynamic autocomplete tag input using jquery pluginAnd how to use it also give you demo for it if it is necessary.

In this tutorial, I will tell you how to implement multiple input tags with dynamic data from MySQL database table using jquery plugin “tagmanager” and “typeahead” JS.

This is required in the application in which you need to show user selected options in a text area in tags with remove option.

This functionality can be done very easily by using jQuery “tagmanager” plugin for multiple input tags based on user selection from dynamic list of data.

Using Tag Manager plugin you can manage input tags separately from each input with better layout.

There are so many plugin available for multiple input tags but Tag Manager plugin can be easily implemented into application with different tag styles.

You can trigger the events to get notification when things happen. For example, when you are going to push the new tags or you have pushed a new tag and also when you remove any tag then you can hook on these events.

To use tag manager you need to have following libraries :

  • bootstrap.min.css
  • tagmanager.min.css
  • jquery.min.js
  • bootstrap.min.js
  • tagmanager.min.js
  • bootstrap3-typeahead.min.js

For this example, I have a database table with all countries :

Now create a “index.php” file for testing :


index.php

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4.     <title>PHP Bootstrap - dynamic autocomplete tag input using jquery tag manager plugin </title>
  5.     <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.     <linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
  7.     <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  8.     <scripttype="text/javascript"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9.     <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
  10.     <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
  11. </head>
  12. <body>
  13. <divclass="container">
  14.     
  15.         <divclass="form-group">
  16.             <label>Add Country Tags:</label>
  17.             <inputtype="text"name="countries"placeholder="Type here.."class="typeahead tm-input form-control tm-input-info"/>
  18.         </div>
  19. </div>
  20. <scripttype="text/javascript">
  21. $(document).ready(function() {
  22. var tags = $(".tm-input").tagsManager();
  23. jQuery(".typeahead").typeahead({
  24. source: function (query, process) {
  25. return $.get('aj.php', { query: query }, function (data) {
  26. data = $.parseJSON(data);
  27. return process(data);
  28. });
  29. },
  30. afterSelect :function (item){
  31. tags.tagsManager("pushTag", item);
  32. }
  33. });
  34. });
  35. </script>
  36. </body>
  37. </html>
<!DOCTYPE html>
<html>
<head>

	<title>PHP Bootstrap - dynamic autocomplete tag input using jquery tag manager plugin </title>
	<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/tagmanager/3.0.2/tagmanager.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>  

</head>
<body>

<div >
	
		<div >
			<label>Add Country Tags:</label>
			<input type="text" name="countries" placeholder="Type here.." />
		</div>

</div>

<script type="text/javascript">
  $(document).ready(function() {
    var tags = $(".tm-input").tagsManager();

    jQuery(".typeahead").typeahead({
      source: function (query, process) {
        return $.get('country.php', { query: query }, function (data) {
          data = $.parseJSON(data);
          return process(data);
        });
      },
      afterSelect :function (item){
        tags.tagsManager("pushTag", item);
      }
    });
  });
</script>

</body>
</html>



country.php

  1. <?php
  2.     
  3.     $mysqli=newmysqli("host","username","password","database");
  4.     $sql="SELECT name FROM countries
  5.             WHERE name LIKE '%".$_GET['query']."%'
  6.             LIMIT 10";
  7.     $result=$mysqli->query($sql);
  8.     $data=[];
  9.     while($row=$result->fetch_assoc()){
  10.      $data[]=$row['name'];
  11.     }
  12.     echojson_encode($data);
  13. ?>
<?php
	
	$mysqli = new mysqli("host", "username", "password", "database");

	$sql = "SELECT name FROM countries 
			WHERE name LIKE '%".$_GET['query']."%'
			LIMIT 10"; 

	$result = $mysqli->query($sql);
	$data = [];
	while($row = $result->fetch_assoc()){
	     $data[] = $row['name'];
	}

	echo json_encode($data);
?>

Add Multiple Email addresses as tags in single text input Example

Show Demo

Hope this code and post will helped you for implement PHP Bootstrap – dynamic autocomplete tag input using jquery plugin. 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 *

5  +  2  =  

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