How to implement my own rule in filter result in jQuery UI Autocomplete

Question

This is my code:

   var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
                   {label:"JUH28", value: "2", fk: "0", desc: "world"},];
                   {label:"HK383", value: "3", fk: "3", desc: "!"},];
     $( "#serial_no" ).autocomplete({
        minLength: 0,
        source: function(request, response) {
                var results = $.ui.autocomplete.filter(projects, request.term);
                response(results);
            },
        focus: function( event, ui ) {
           $( "#serial_no" ).val( ui.item.label );
              return false;
           },
        select: function( event, ui ) {
           $( "#serial_no" ).val( ui.item.label );
           $( "#device_id" ).val( ui.item.value );
           $( "#device_model" ).text( ui.item.desc );
           return false;
        }
     })
     .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
     };

So now, for example, if I type 'H' in the field, all 3 results (ie PH2938, JUH28, HK383) will be shown. My question is: is possible to make it only show the results (ie PH2938, HK383) whose fk = 3. That is, can I implement my own rule in showing which results.

Answer 1

If I have understood correctly you need to filter the projects by some criteria. In this case by fk being equal to '3' .

As you are already using jQuery then $.grep is the good candidate for the filtering task.

$.grep(projects, function (project) {
  return project.fk === '3';
});

Now we have to decide where to perform this filtering.

If you want to get rid of those projects that meet the fk criteria regardless of the term used in the autocompletion input, I would do it in the original projects array:

var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
               {label:"JUH28", value: "2", fk: "0", desc: "world"},];
               {label:"HK383", value: "3", fk: "3", desc: "!"},];    
projects = $.grep(projects, function (project) {
  return project.fk === '3';
});

If what you want is something more flexible that allows you to provide a different data source depending on other criteria, not only the text matching of the label, then you can perform this filtering in the source property:

source: function(request, response) {
  var results = $.ui.autocomplete.filter(projects, request.term);
  // Filter the matched results by project fk 3. 
  results = $.grep(results, function (project) {
    return project.fk === '3';
  });
  response(results);
},

The filtering could be performed before the matching too:

source: function(request, response) {
  // Filter the matched projects by project fk 3. 
  var filteredProjects = $.grep(projects, function (project) {
    return project.fk === '3';
  });
  var results = $.ui.autocomplete.filter(filteredProjects, request.term);
  response(results);
},

See a demo for the latter.