remote filter processing indicator / disable certain elements in data array

[jpgilchrist]

I had a need to display a "loading" or "processing" indicator while my remoteFilter was doing work. I came up with a solution which goes something like this:

{
  ...
  remoteFilter: _.debounce(function(query, callback) {
    if (typeof query === 'string' && query.length < 2)
      return;

    callback([{display: "<li style='text-align: center;'><i class='fa fa-spinner fa-spin'></i></li>", name: query}]);

    $.ajax({...})
      .done(function (results) {
        callback(_.map(results, function(result) {
          var doc = $.extend({}, result);
          // some logic to determine doc.display
          return doc;
        }
      });
  }, 150), 
  displayTpl: '${display}',
  ...
}

As you can see I call callback twice; once with some dummy data and once with real data. The dummy data is simply something that will display font awesome's spinner icon.

First, it would be cool if the project had a built in feature for this.

Secondly, my problem arises because I am doing this work around and there's a possibility for a user to hit tab, enter or click the spinner icon before the second callback is executed. Therefore, a user could select bad data. My quick fix for this is to set hightlightFirst: false so that they can't just hit tab or enter immediately to select it, which brings up my second suggestion: have an attribute on an element disable in order to mark an element in a list as non-selectable.

Thoughts, opinions, suggestions, alternatives solutions are all welcomed and appreciated!