Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI Autocomplete widget search configuration

I'm looking into using the jQuery UI autocomplete widget to implement user lookup by first or last name. It looks like by default autocomplete looks up words by character sequence no matter its occurrence in a word. So if you have data such as: javascript, asp, haskell and you type in 'as' you will get all three. I would like it to only match beginning of the word. So in above example you get only 'asp'. Is there a way to configure the autocomplete widget to do this?

Ultimately it would be even better to match by beginning of first or last name like it is in Gmail.

Note: I'm trying to figure out a way to do this using the jQuery UI widget specifically. Since I'm already using jQuery UI in my project, I'm planning to stick with it and try not adding additional libraries to my web application.

like image 764
dev.e.loper Avatar asked Mar 04 '10 20:03

dev.e.loper


People also ask

How can create autocomplete search box in jQuery?

Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })

How do you find the value of autocomplete?

The AutoComplete control supports strongly-typed HTML helpers represented by lambda expressions that have model or template passed into the View. So, you can get the selected value from view in the Controller part. To achieve this, create an AutocompleteFor control and bound the dataSource from controller part.


3 Answers

I use the autocomplete from devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

It matches on the beginning characters, only.

alt text

As far as matching based on first name or last name, you'd just have to supply a lookup list with the first and last name.

Example usage:

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

The lookup option that you pass to initialize the autocomplete control can be a list, or an object. The above showed a simple list. If you want some data attached to the suggestions that get returned, then make the lookup option an object, like this:

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};
like image 172
Cheeso Avatar answered Oct 19 '22 14:10

Cheeso


thx cheeso for intrducing jsbin.com,

i extended your code to support first- and lastname matches, too.

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

demo: http://jsbin.com/ufimu3/

type 'an' or 're'

like image 33
Phil Rykoff Avatar answered Oct 19 '22 13:10

Phil Rykoff


If you want to search the beginning of each word in the string, a more elegant solution to henchman's is to take cheeso's but just use the regexp word boundary special character:

var matcher = new RegExp( "\\b" + re, "i" );

Example: http://jsbin.com/utojoh/2 (try searching for 'bl')

like image 3
Nader Avatar answered Oct 19 '22 14:10

Nader