Yesterday I announced the release of TagDragon 1.2. In this post, I want to show you TagDragon's flexibility by using it for something you might not associate this component with. Before we do, let's have one more look at TagDragon in action:

This is TagDragon for what it is designed: entering values while selecting suggestions from a dropdown box. You can apply it to text inputs and text areas, you can style it the way you want it, and you can hook this up to anything that can return JSON. And of course, you do not have to use it for tags. You can use any value set you like, whether they are cities, user names, snakes (example) or anything else. TagDragon excels at providing a user-friendly way to ENTER values, so you would typically see it on forms to create or edit some object.

This is not where it ends though. TagDragon has a rich API that allows you to use it for other scenarios too. I will explain this by example. Let's have a look at the Tags page of StackOverflow.com, a Q & A site for programmers:

On this page, users can browse for tags manually, or they can filter tags by entering a value in the search box. There is no search button, because the search is executed as users type in the search box. The results are displayed in real-time, using the 4 column panel below it. All in all a very user friendly way to browse for content.

Although in the stackoverflow use case we are not really inserting or editing information on a form, in essence this is still an autosuggest. The only difference is that the results are not rendered as a dropdown, instead they are rendered as a 4 column table.

Back to TagDragon. We can use it to develop the above scenario quite easily. TagDragon 1.2 has a rich callback API and various properties to override the rendering. Let's see how to do this.

First, the HTML. I will limit this to the essentials for the example:

<div id="tagbox" class="tagbox">
<input type="text" value="" id="tagsearch" name="tagsearch" />
</div>

A simple div with inside it a named input box. Next, we of course need to include the jQuery and TagDragon JS libraries in our page header. I will skip that part for now, check the TagDragon documentation for details.

On to the heart of the code, the call to the TagDragon component:

   1:  $(document).ready(function() {

   2:   

   3:      

   4:      var tagHTML = '';

   5:      var cacheHTML = $("#tagcloud").html();

   6:      var cachePag = $("#pagination").html();

   7:      var tagLength = 0;

   8:      var input = $('#tagsearch');

   9:      var loaded = false;

  10:   

  11:      // use Tagdragon plugin to enable autosuggest functionality for tag field

  12:      // we will not use the tagbox lookup field, 

  13:  instead we will render the results ourselves in the callbacks

  14:      $('#tagbox').tagdragon({'field':'tagsearch','charMin': 0,'visible':false,

  15:  max:200,'dataType':'html','tagsep':'','url':'<?= $this->basepath ?>tag/json_search_tags',

  16:      onLoadedList: function(results) {

  17:          

  18:          tagLength = input.val().length;

  19:          if (tagLength == 0 && !loaded) return;

  20:          if (tagLength == 0 && loaded) { 

  21:              $("#tagcloud").html(cacheHTML);

  22:              $("#pagination").html(cachePag);

  23:              return;

  24:           }

  25:          

  26:          // insert the HTML into the DOM

  27:          $("#tagcloud").html(results);

  28:          $("#pagination").html('');

  29:          loaded = true;

  30:          

  31:          // clear the HTML

  32:          tagHTML = '';

  33:      }

  34:      });

  35:   

  36:  });

This seems like a lot, but there are only a few relevant lines here:

• 1. The jQuery wrap code which is triggered once the DOM is loaded. 
• 2-13. Ignore, this code is specific for my situation, it has to do with caching.
• 14-34. This is the call to the TagDragon component.

Let us examine lines 14-34 in more detail. We are doing two things: setting a bunch of options, and overriding one method of the API. Let's look at the options:

• field. The id of the input field we created earlier
• charMin. Trigger remote loading starting from 0 characters entered
• visible. Do not render the dropdown (we will override the rendering)
• max. The maximum number of results to retrieve
• dataType. By default is JSON, but we will override this since our back-end will return the HTML to render
• tagsep. Value seperator. We set it to '' (no seperator) to indicate this is a single value lookup
• url. Sorry for the PHP mixed in here, but this is simply the address to the backend script that will return the HTML

With those options set, particularly visible and dataType are important here, we can now override the rendering. We do this by implementing the onLoadedList function, which gets passed the results of the query, in our case in the form of HTML. We could have also kept the datatype as JSON and loop through the JSON objects here, but in this case the back-end returns HTML.

The working of the back-end is of course very specific per case. In my case it is a PHP script that does a database lookup based on the search term passed by TagDragon, and then echoes the HTML. The result is passed to the onLoadedList method and from that point on we can do what we want with it. Most likely you will want to insert the result somewhere in the DOM, as I'm doing on line 27.

So, in summary. Using TagDragon for value browsing (instead of entering values) consists of two steps: setting the correct options and overriding a method with your own rendering logic. Easy.

Here's how it looks in JungleDragon (the data is test data only, but it works. I entered 'a' as the filter):

Note that in the backend I'm filtering on both sides, so a tag does not have to start with 'a'. It's really cool to see this at work, typing ahead to browse through huge value sets rapidly. Remember, you can do this for any content, not just tags.

I know I've skipped some details in this post, but my point was to merely show you what TagDragon can do. Do you like it?

RATE THIS CONTENT (OPTIONAL)

	Was this document useful to you?
	Rating:	Awesome  Good  Average  Poor  Useless

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.