views:

36

answers:

0

I'm in the middle of constructing a custom autocomplete using jQuery because my site cannot use query strings. (I'm using Codeigniter, and despite the many various configurations I've tried, I can't get it to accept query strings for just the ajax search pages.) I tried to find a ready-made solution through Google and couldn't, but would love to know if one is available.

Here is the Javascript I have so far that fetches suggested tags and displays them beneath the 'tags' input box:

$(document).ready(function() {
    $("#topic").keydown(function() {
        //call search page
        $.post("/search/suggestions/tags",{ terms:$(this).val() } ,function(data) {
            // if no suggestions are returned
            if (data=='empty') {
                $("#tags-suggestions").removeClass().addClass('search-suggestions').html('no suggestions').animate({opacity:'0.75'},{queue:false, duration:1500, easing: 'easeOutBounce'});
             }
            // if suggestions are returned
            else {
                $("#tags-suggestions").removeClass().addClass('search-suggestions').html(data).animate({opacity:'0.75'},{queue:false, duration:1500, easing: 'easeOutBounce'});
            }
        });
    });
//if suggestion is clicked, it should replace what's in the tag box
   $('li.suggested-tag').click(function() {
        var tag = $('.suggested-tag').html();
        $('#topic').val(tag);
    });
});

The first part works fine -- the suggested tags pop up below the tag box (though they're aren't lined up perfectly, so any hints on how to do that would be great as well). But clicking on the suggestions doesn't do anything. So my questions are:

1) How can I make it so that clicking on the suggested tag replaces what's in the tag box; and

2) Is there anyway to get the script to recognize comma-separated tags (like the tag box here on SO), so that it only searches for and replaces text after the last comma?

I'd appreciate any insight.