jQuery quicksearch highlight results with onAfter function call?

Question

I got an amazing answer quickly yesterday quickly about the best autocomplete option for what I needed.

I think I can use the onAfter funtion call from QuickSearch to call the SearchHighlight plugin to highlight the text I am typing in.

Is that feasible? I am having a hard time getting it to work.

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <title>rikrikrik - quickSearch jQuery plug-in - List items</title>
     <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
     <script src="jquery.quicksearch.js" type="text/javascript" charset="utf-8"></script>
     <script src='jquery.SearchHighlight.js'></script>
     <script type="text/javascript" charset="utf-8">
      $(document).ready(function () {    
       $('ul#a li').quicksearch({
        attached: 'ul:first',
        position: 'before',
        labelText: 'Search all countries beginning with A',
        inputText: 'Search',
        loaderImg: 'loader.gif',
        loaderText: 'Searching...'
        onAfter: ('ul#a li').SearchHighlight(partial)

Answer 1

It looks like that plugin is intended to work on a regular expression that parses the keywords out of the referrer URL. I don't see you changing the options for the SearchHighlight plugin, so you're working with its default configuration. That means that it doesn't know about your search textbox and it doesn't know how to pull the keywords from it anyway. It looks like you can use the keys option to reconfigure it to use specific keywords, though.

So, you need to change your call to SearchHighlight to something like this:

        $(document).ready(function() {
        $('ul#a li').quicksearch({
        attached: 'ul:first',
        position: 'before',                                
        labelText: 'Search all countries beginning with A',                                
        inputText: 'Search',                                
        loaderImg: 'loader.gif',                                
        loaderText: 'Searching...',
        onAfter: function() { $('ul#a li').SearchHighlight({ exact: "partial", keys: $('.qs_input').val() });
    });

where SEARCH_BOX is the ID of your textbox.

EDIT: Ha! My syntax was way off. Sorry about that. The above code should work for you. Also, this may not be all that great because there is no way to reset the highlights when you change the search string.