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>

You may also interested in Learning jQuery Autocomplete from scratch. Checkout Video Tutorials series on: jQuery UI Autocomplete from Scratch


Learn jQuery Autocomplete in 3 Minutes


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] muni2explore[at]gmail.com

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.

%d bloggers like this:

Get Instant Script Download Access!