Please support us by disabling ad blocker for smarttutorials.net ...

jQuery Autocomplete Post Tagging System Like In WordPress

Posted by & filed under Ajax, CSS, HTML5, JQUERY, MYSQL, PHP.

In this artcile we are going to see how to implement post tagging system like in the blogger, wordpress or some of the CMS systems.

We mostly use this type of post tagging system in all type of content management system. It always good idea to show suggestion when user tag their post in their content management system. let’s see how to implement this jQuery autocomplete in our blogger/wordpress post tagging system.

jquery autocomplete integration

 

 

jQuery Autocomplete Post Tagging System

jQuery Autocomplete Post Tagging System

Create HTML Form For jQuery Autocomplete:

Create your HTML form or use the following sample HTML form for this jQuery autocomplete tagging system.

<input id="tag" class="form-control">
<div id="tags_container">
</div>
<input id="tags" class="form-control" style="margin-top: 20px;display: none;"/>

Add jQuery UI Autocomplete Plugin:

Please ensure following plugins are added in your in HTML or PHP page.

<!-- CSS -->
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />

<!-- jquery Library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

 

 

jQuery AutoComplete Post Tagging Script:

Here is comes important section where we code jquery autocomplete post tagging system script. We will make ajax request to server when users types in text box, which pulls and shows suggestion of tags from the Database using PHP script.

Following script makes ajax request, shows suggestion and finally adds the selected tag and tag_id to the tags container div and tag_id textbox respectively.

$('#tag').autocomplete({
	source : function(request, response) {
		$.ajax({
			url : 'ajax.php',
			dataType : "json",
			method : 'post',
			data : {
				name_startsWith : request.term,
				type : 'country_table',
				row_num : 1
			},
			success : function(data) {
				response($.map(data, function(item) {
					var code = item.split("|");
					return {
						label : code[0],
						value : code[0],
						data : item
					}
				}));
			}
		});
	},
	autoFocus : true,
	minLength : 0,
	select : function(event, ui) {
		var names = ui.item.data.split("|");
		
		tag_ids = [];
		tags = $('#tags').val();
		if(tags != '')tag_ids = tags.split(',');
		tag_ids.push(names[1]);
		$('#tags').show();
		$('#tags').val( tag_ids.join( "," ) );
		
		html = '' + names[0] + '';
		$('#tags_container').append(html);
		$('#tag').val('');
	},
	open : function() {
		$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
	},
	close : function() {
		$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
		$(this).val('');
	}
});

This following script remove the particular tag from tag container div, as well as remove that particular tag_id from the tag_id textbox.

$(document).on('click', '.span-tag1 i', function() {
	id = $(this).parent().attr('id');
	tags = $('#tags').val();
	tag_ids = tags.split(',');
	var index = tag_ids.indexOf(id);
	if (index > -1) {
		tag_ids.splice(index, 1);
		ids = tag_ids.join( "," );
		$('#tags').val( ids );
	}else{
		ids = tag_ids.join( "," );
		$('#tags').val( ids );
	}
	if(ids == '') $('#tags').hide();
	
	$(this).parent().remove();
});

jQuery Autocomplete PHP Script:

Here comes jQuery Autocomplete PHP Script which handles the jQuery autocomplete ajax request. This PHP script gets the user entered data from ajax request, searches and gets the results from MySQL database, and finally it sends results to client side.

Create PHP configuration file i.e config.php.

define('DB_HOST', 'localhost');
define('DB_NAME', 'autocomplete');
define('DB_USERNAME','root');
define('DB_PASSWORD','');

$con = mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if( mysqli_connect_error()) echo "Failed to connect to MySQL: " . mysqli_connect_error();

now create ajax.php which makes connection to database and fetches the results.

<?php
/*
Site : http:www.smarttutorials.net
Author :muni
*/
require_once 'config.php';
if($_POST['type'] == 'country_table'){
	$row_num = $_POST['row_num'];
	$result = mysqli_query($con, "SELECT id, name FROM country where name LIKE '".strtoupper($_POST['name_startsWith'])."%'");	
	$data = array();
	while ($row = mysqli_fetch_assoc($result)) {
		$name = $row['name'].'|'.$row['id'].'|'.$row_num;
		array_push($data, $name);	
	}	
	echo json_encode($data);
}

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • toushin

    Hi Muni. Do you have a similar script but accepts the user’s input if the item is not found in the mysql database?

  • Great, Above code is working fine.

  • Yes I have. But It is premium script…. Check demo page in the following link…
    http://www.smarttutorials.net/invoice-script-php/

  • Cold Steel

    Do you have a complete sample code of the above code with tags and everything?

  • Cold Steel

    Have you tried the code out? If so, could I see the code that you used?

  • Cold Steel

    I would like to know how to add the names of the tags selected to a preexisting sql table. Say a user is logged in, they select the tags that they want, they press a button, and the names of the tags they selected are put into their row in an sql table under a column called countries. I’d appreciate any feedback you can give on this.

  • Amit Khullar

    can u share the css code for the autocomplete func

Get Instant Script Download Access!