Skip to content

How to use remoteFilter

Harold.Luo edited this page Jan 18, 2015 · 4 revisions

Normal Usage

If remoteFilter be set as a function, At.js will invoke it if local filter can not find any data so, At.js will always invoke remote_filter with matched string and then you can use it to fetch data from server by the matched string:

$('#inputor').atwho({
  at: "@",
  callbacks: {
    /*
     It function is given, At.js will invoke it if local filter can not find any data
     @param query [String] matched query
     @param callback [Function] callback to render page.
    */
    remoteFilter: function(query, callback) {
      $.getJSON("/users.json", {q: query}, function(data) {
        callback(data.usernames)
      });
    }
  }
});

Caching example

Here is an example how I implement caching with this plugin. Hope its useful for folks here...

    var cachequeryMentions = [], itemsMentions,
    searchmentions = $('textarea').atwho({
        at: "@",
        callbacks: {
                remoteFilter: function (query, render_view) {
                    var thisVal = query,
                    self = $(this);
                    if( !self.data('active') && thisVal.length >= 2 ){
                        self.data('active', true);                            
                        itemsMentions = cachequeryMentions[thisVal]
                        if(typeof itemsMentions == "object"){
                            render_view(itemsMentions);
                        }else
                        {                            
                            if (self.xhr) {
                                self.xhr.abort();
                            }
                            self.xhr = $.getJSON("/getmentions",{
                                term: thisVal
                            }, function(data) {
                                cachequeryMentions[thisVal] = data
                                render_view(data);
                            });
                        }                            
                        self.data('active', false);                            
                    }                    
                }
            }
        });
    });

Hope it helps!