I was searching for ways to do a tagging system, a la del.icio.us in my previous post

Here's how to hack one up. It's still rough. For starters, only the last entry will be suggested. And I can't find a way to clear the update field. But I thought, what the hey. Better something than nothing.

So, here's what we need to do:

• get jquery and my modified tagto jquery plugin
• Add these in the head section. These are functions to display the suggestions after <div id="marker"> I haven't found a good way to clear this up before appending newer suggestions. $().replaceWith won't work. It seems, only $().append works.:

     <script type="text/javascript">
    $(document).ready(function(){
     // Your code here
    $("#tagclass").keyup(function() {
            initvar = $(this).val().split(" ");
          if (initvar.length == 1){
                  myvar = initvar;
                          } else {
                  myvar = initvar.slice(-1);
                                  };
  
               $.ajax({'url':'search.php',
                        'data': {'q': myvar},
                         'type':'get',
                         'success': function(data){
                            var $res = $('<div  id="res"></div>').hide().insertAfter("#marker");
                              $res.append(data).show("slow").tagTo("#tagclass", " ");
                             }
  
                       });
                                    });
  
          $("#test").keyup(function(){
                                  testvar = $(this).val().split(" ");
                                  $("#ans").val(testvar);
                                                  });
     });
  
    </script>
  

• prepare the tag suggestion script. If we're using Zope's Catalog, we can make use of KeywordIndex, and return catalog.uniqueValuesFor(theindex). :

   ##id - search.php
   ##parameters q
   res = context.Catalog.uniqueValuesFor('tags')
  
   if len(q.strip().split()) > 1:
    q = q.strip().split()[-1]
  
   if len(q) > 2:
    for x in res:
      if q.lower() in x.lower():
        print ' <a href="#" class="tagsug">%s</a> ' % x 
  
    return printed
  

And we're done. Try the demo

If you have ideas on improving this, tell us lah.

Thanks to jquery community, and tagto Author: Realazy, http://realazy.org/blog/ (chinese)