Tags Input with Autocomplete using jQuery and PHP Example

By Hardik Savani May 14, 2024 Category : PHP Bootstrap HTML jQuery MySql Ajax

In this post i am going to give you the example of Add Multiple input tags with autocomplete from MySQL database table using typeahead bootstrap JS and tagmanager JS.

Sometimes we require to make multiple input tags on our form. At that time we require to use jquery plugin for input multiple tags. But here we are going to use tagmanager.js plugin for add multiple input tags. I already added one simple tutorial for tagmanager.js here : Bootstrap - Input multiple tags example using Tag Manager Jquery Plugin, But In this article we learn how to insert tags with autocomplete that get data from database table. Autocomplete require when we have lots of data comes from database table, it can handle only by autocomplete.

Tag Manager plugin through we can make input tags function and it's provide by maxfavilli.com. Input tags will help to add multiple tags with good layout and better way. If you need to add multiple value into on single text box then you can use tag manager with typeahead js.

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

1) bootstrap.min.css

2) bootstrap.min.js

3) jquery.min.js

4) tagmanager.min.css

5) tagmanager.min.js

6) bootstrap3-typeahead.min.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 - Input multiple tags with dynamic autocomplete example</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 class="container">
	<form>

		<div class="form-group">
			<label>Name:</label>
			<input type="text" name="name" class="form-control" >
		</div>

		<div class="form-group">
			<label>Add Tags:</label><br/>
			<input type="text" name="tags" placeholder="Tags" class="typeahead tm-input form-control tm-input-info"/>
		</div>

		<div class="form-group">
			<button class="btn btn-success">Submit</button>
		</div>

	</form>
</div>

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

    jQuery(".typeahead").typeahead({
      name: 'tags',
      displayKey: 'name',
      source: function (query, process) {
        return $.get('ajaxpro.php', { query: query }, function (data) {
          data = $.parseJSON(data);
          return process(data);
        });
      },
      afterSelect :function (item){
        tagApi.tagsManager("pushTag", item);
      }
    });
  });
</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:

Read Also: PHP - Dynamically Add Remove input fields using JQuery Ajax Example with Demo
php -S localhost:8000

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

I hope it can help you...

Tags :
Previous

Laravel Dynamic Autocomplete Search using Select2 JS Ajax - Part 1
Next

Laravel 5.4 New Feature - Add Eloquent WhereKey Method Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares