Skip to content

How to use remoteFilter

Amadeusz Annissimo edited this page Mar 13, 2018 · 4 revisions

Normal Usage

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

$('#inputor').atwho({
  at: "@",
  callbacks: {
    /*
     If 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!