Tag Hint

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 90%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

Example title
Tag Hint is a very user friendly funcionality that allows you to get hints for avalaible tags in the system when you want to search for tags with a Tag Search Portlet. When you start to type characters as you are about to search for tags, this Tag Hint gives you hint not only for the tags which are starts with that character you typed but the tags which contains that character also.

Details

First of all, Tag Hint functionality is based on jQuery's autocomplete function. This function is the hinting functionality.

The jQuery Function

$(document).ready(<function() {
    $(<span class="st0"".tbSearchInput"</span>).autocomplete(window.location.protocol + '//' + window.location.host + '/ContTagManager.mvc/GetTags', {
        dataType: 'json',
        minChars: 0,
        delay: 400,
        max: 50,
        matchContains: true,
        autoFill: false,
        mustMatch: false,
        scrollHeight: 220,
        highlight: function(match, keywords) {
            keywords = keywords.split(' ').join('|');
            return match.replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>');
        }
});

Parameters

As you can see the code above the autocomplete function has some parameters that you can configure. All the parameters has a default value but of course you can override them anytime.

For example:

  • max: how much tags should be displayed
  • scrollHeight: in how big box should it be shown
  • mustMatch: should the hint search matches anywhere or just at the beginning of the tags
  • and so on...

Documentation

A detailed documentation of the jQuery's autocomplete function and it's parameters can be found here:

jQuery Autocomplete Plugin Documentation

User group informations

for End users

You can use this Tag Hint functionality if you put out a Tag search Portlet to your site. The Tag Hint automatically works on the input field of that portlet.

Another way you can use it if you add a CSS class called tbSearchInput to an input field on your site. The Tag Hint will automatically work on that item.

for Portal builders

The output of the Tag Hint is formatted with simple CSS. No flashplayer or extra plugin needed to make it work. Only jQuery’s javascript files needs to be loaded.

for Developers

Modell-View-Controller Logic

Another important thing is in the parameterlist of this autocomplete function:

window.location.protocol + '//' + window.location.host + '/ContTagManager.mvc/GetTags'

This uses the following:

public string returnTags(string q)
{
     StringBuilder sbBuilder = new StringBuilder();
     var allTags = TagManager.GetAllTags(q);
 
     foreach (var tags in allTags)
     {
         sbBuilder.Append(tags + "\n");
     }
 
     return sbBuilder.ToString().Trim(new char[] {'\n'});
}
 
public ActionResult GetTags(string q)
{
     if (q.Length == 0) 
     {
         return Json(string.Empty);
     }
     return Json(returnTags(q));
}

This works in MVC (Modell-View-Controller) logic. This code uses the GetAllTags function of theTagManager class to get all the matches from the available tags in the system. The GetTags function returns the tags in JSON (JavaScript Object Notation).

Example/Tutorials

Related links

References

jQuery's Autocomplete Plugin