How to implement a tags systems into your knowledge base using PHP and JavaScript

Home > Search > How-to
  by

Tags allow us to display display similar articles to users. For example, if there is an article titled how fix a dripping faucet, we could give this article two tags, plumbing and faucets. When visitors to your site are viewing plumbing articles, how fix a dripping faucet would be one of the similar articles displayed. Similarly, when viewing articles about faucets, how fix a dripping faucet would be one of the articles displayed.

First, we need to create a system which allows users to apply tags to a new article. We do not want to create static drop-down lists, because then someone would constantly need to locate new tags and add the new tags to the drop-down. Also, it wouldn't take long for the drop-down list to expand beyond the length of the display. Instead, we need to allow users to type tags into an input field. If the keyword being entered has already been added by a previous user, we will let the user know this is a good tag, because it has already been added by a previous user. AJAX is needed to accomplish this.

First we will create an input form.

<script type="text/javascript" src="js/ajax_tags.js"> </script>

<form method="post" action="processing.php">
  <input type="text" name="keyword0" id="tags_id0" onkeyup="autocomplet0()">
</form>

Notice the input include an onkeyup event named autocomplet0(). This event will check the ajax.tags.js file.  The following Javascript creates the onkeyup event.

function autocomplet0() {
	var min_length = 0; // min characters to display the autocomplete
	var keyword0 = $('#search_id0').val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_tags_processing.php',
			type: 'POST',
			data: {keyword0:keyword0},
			success:function(data){
				$('#search_results0').show();
				$('#search_results0').html(data);
			}
		});
	} else {
		$('#search_results0').hide();
	}
}

function set_item(item) {
	$('#search_id0').val(item);
	$('#search_results0').hide();
}

Notice the JavaScript file makes a call to a file named ajax_tags_processing.php. This PHP check the database table for a result that matches the keyword being used.

<?php
$con = new mysqli('ip_or_domain', 'username', 'password', 'database');
$string0 = $_POST['keyword0'];
$sql0 = "select tags from tags where tags like '%$string0%' ";
$sql0_query = $con->query($sql0);

while ($row = mysqli_fetch_array($sql0_query)) {
  $tags0 = $row['tags'];
  $num_rows0 = mysqli_num_rows($sql0_query);
  if ($num_rows0 !='1') {}
  else {echo "$tags0";}
}

If a match is found, the match will be outputted to a variable named $tags_results0. We can add $tags_results0 to our page that allows a user to create a new article, which will let the user know if the tag being used is a known tag.

<span result="tags_results0"></span>

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments