jQuery Autocomplete Post Tagging System Like In WordPress

Posted 7:06 am by muni & 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 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);
}

.