onlinecode

PHP – Input multiple tags with dynamic autocomplete example

onlinecode

PHP – Input multiple tags with dynamic autocomplete example

In this post we will give you information about PHP – Input multiple tags with dynamic autocomplete example. Hear we will give you detail about PHP – Input multiple tags with dynamic autocomplete exampleAnd how to use it also give you demo for it if it is necessary.

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.

See also  Laravel Typeahead Search Tutorial

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:

See also  Laravel 7/6 Ckeditor Image Upload Example

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 >
	<form>

		<div >
			<label>Name:</label>
			<input type="text" name="name"  >
		</div>

		<div >
			<label>Add Tags:</label><br/>
			<input type="text" name="tags" placeholder="Tags" />
		</div>

		<div >
			<button >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:

Also see:Laravel Dynamic Autocomplete Search using Select2 JS Ajax – Part 1
php -S localhost:8000

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

I hope it can help you…

Hope this code and post will helped you for implement PHP – Input multiple tags with dynamic 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

For More Info See :: laravel And github

Exit mobile version