Jquery autocomplete with multiple keywords, highlighting and partial matches

Question

I'm on the hunt for a JQuery autocomplete that will:

Search partial matches
Highlight all occurrences whereever they appear
Allow multiple word
Allow remote datasources (i.e. PHP filters database results based on querystring that dynamically updates with each keypress)

So for example

Search: "me wa home"

Returns: "show me the wa y to go home"

I'm having a terrible time trying to find something that can offer this, even though it is common expectation of a Google-style autocomplete.

The monkeypatch of jquery ui autocomplete ( jQueryUI: how can I custom-format the Autocomplete plug-in results? ) comes close, but doesn't seem to offer dynamic remote datasources.

I've also come close with the following script:

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$("#f input").autocomplete({
   source: "livesearch.php",
   open: function(e, ui) {
      var origKeyword = $("#f input").val();
      var acData = $(this).data('autocomplete');
      acData.menu.element.find('a').each(function() {
         var me = $(this);
         var regex = new RegExp(acData.term, "gi");
         me.html(me.text().replace(regex, function(matched) {
            return termTemplate.replace('%s', matched);
         }));
      });

   },
   select: function(event, ui) {
      var keyword = $("#f input").val();
      $("#f input").val('');
      window.location.href = 'MYURLHERE?VARIABLE=' + ui.item.value;
      return false;
   },
   focus: function(event, ui) {
      return false;
   }
});

However, it doesn't handle highlighting multiple words separated by a space.

if anyone has any suggestions, I'd be hugely grateful.

Use a function for the source option to manually query the server. Look at step 4 here: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/ Note in step 5 that autocomplete passes the search items to `$_GET['term']` — Nal, Sep 05 '12 at 16:36
Yes, a dynamic remote source is definitely possible. Highlighting the individual words is harder, but not impossible with jQueryUI autocomplete — Andrew Whitaker, Sep 05 '12 at 21:15
Thanks Nal. I've had a go at adding in the function you mentioned into code the supports multiple highlighting. However I can't get it working. Would you might having a look at my code in Answer 1? — iltdev, Sep 06 '12 at 10:44

score 1 · Answer 1 · answered Sep 06 '12 at 17:15

1

@user287212, I did some research about JQuery AutoComplete with multiple keywords. I found an example in this address. It's a complex example but there is a JQuery AutoComplete example with multiple keywords. If you write a symbol in the symbol input, the program will bring to you the terms in the file. Example explanation at this link. You can look on this link.

answered Sep 06 '12 at 17:15

RuudVanNistelrooy

969
1
7
14

Thanks Aziz. That certainly seems to do what I want... but it's technically out of my league I think. I'll certainly have a look at it though. I was just hoping I'd be able to modify my example above as it's sooo close to working. – iltdev Sep 06 '12 at 18:29

score 1 · Accepted Answer · answered Sep 11 '12 at 13:29

This is the solution I went with:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<style type='text/css'>
   .srchHilite {background-color: yellow;}
</style>

<script type='text/javascript'>
$(document).ready(function(){

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$("#tags").autocomplete({
 source: function(request, response) {
        $.getJSON("livesearch.php", request, function(data, status, xhr ) {

            var newmatchArry = new Array();
            var matchArry   = data.slice ();
            var srchTerms   = $.trim (request.term).split (/\s+/);

                //--- For each search term, remove non-matches.
                $.each (srchTerms, function (J, term) {
                    var regX    = new RegExp (term.value, "i");
                    matchArry   = $.map (matchArry, function (item) {
                        return regX.test (item)  ?  item  : null;
                    } );
                } );

            response(matchArry);

        });
    },

  open:   function (event, ui) {
                /*--- This function provides no hooks to the results list, so we have to trust the
                    selector, for now.
                */
                var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                var srchTerm    = $.trim ( $("#tags").val () ).split (/\s+/).join ('|');

                //--- Loop through the results list and highlight the terms.
                resultsList.each ( function () {
                    var jThis   = $(this);
                    var regX    = new RegExp ('(' + srchTerm + ')', "ig");
                    var oldTxt  = jThis.text ();

                    jThis.html (oldTxt.replace (regX, '<span class="srchHilite">$1</span>') );
                } );
            }
} );

});
</script>
</head>

<body>
<input id="tags">

</div>
</body>

</html>

Jquery autocomplete with multiple keywords, highlighting and partial matches

2 Answers2