jQuery UI Autocomplete: search more than just "label" within a local json array

Question

*Story:

I have a site with 2 search bars, where users can search a school then a class within that school via jQuery autocomplete. All my data is in a LOCAL json array, for example:

var schools = [{"label": Boston University, "value": Boston University, "nickname": BU}]

*Problem:

When searching, I want to match user's input not just to "label" but to "nickname" as well, so that school is searchable by both "Boston University" and "BU". Here's my code now:

$(document).ready(function(){
  $("#school").autocomplete({
    appendTo: ".custom-autocomplete",
    source: schools,
    minLength: 0,
    select: function( event, ui ) {
      $("#class").autocomplete({
        appendTo: ".custom-autocomplete",
 source: courses,
 minLength: 2,
 select: function( event, ui ) {
          $('#submit_header_form').attr('class','submit_header_form');
 }
      });
    });
 });

I know we can use PHP on remote data to achieve this result, but I need to use a local array to speed up the search because I have a lot of classes within each school.

Since I'm a newbie code and the stack is fully functional now, a quick fix would be ideal. Thanks everyone for your help!

Answer 1

You can do it by supplying source as a callback. There is an example on jQuery UI website, but you can just modify standard implementation.

source: function (request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(schools, function(value) {
        return matcher.test(value.value)
            || matcher.test(value.nickname);
    }));
}

Here's a fiddle: http://jsfiddle.net/h5E6C/