javascriptjqueryajaxjsoncanjs-model

How to filter JSON data for autosuggestion using Ajax (without jQuery ui)


I am trying to create an auto-suggestion from scratch. I am using canjs controller to control the DOM elements (ul and li). I want smart and short code to implement this. I have tried with filter but I want Ajax filter method to use for this purpose.

I have tried the following thing:

can.Model:

 var SearchDomainModel = can.Model.extend({
    findAll: function(){
        return this.getDomains;
    }
}, { domainList: null,
    getDomains: function(params, callback) {
        var promise = $.ajax({
            url: '/scripts/models/domains.json',
            type: 'GET',
            dataType: 'json',
            dataFilter: function(data, type){
               var parsed_data = JSON.parse(data);
                var regex = new RegExp(params, 'gi')
                var temp = []; 
                $.each(parsed_data, function(i, item){
                    for(var j in item)
                      if ((item[j].url).toLowerCase().indexOf(params) >= 0){
                        temp.push(item[j].url);
                        console.log(temp);
                    }
                });
                return temp;
            }

});

This is my can.controller:

var DomainController = can.Control.extend({
    defaults: {
        view: 'views/domainSearch.hbs'
    }
}, {
    searchList: new can.List(),
    domainModel: new DomainModel(),
    init: function(element, options) {
        this.element.html(can.view(this.options.view, this.searchList));
        $('html,body').css({
            percentWidth: 100,
            percentHeight: 100
        });
        $('.error').hide();
    }, // control domain filter on keyup event

'input keyup': function(element, event) {
        var self = this;
        var searchText = element.val();

        if (searchText !== "") {


            this.domainModel.getDomains(searchText, function (response, error) {

                   self.searchList.attr("domains",response);
                   console.log(error);
             })     

I am trying and searching from last two days. I could not have done it. Can anybody suggest me where is my mistake in the code and how to solve it?

Thanx in advance!!


Solution

  • I would probably do something like this:

    var SearchDomainModel = can.Model.extend({
        findAll: function(){
            return this.getDomains;
        }
    }, { domainList: null,
        getDomains: (function() {
            var domains = null;
    
            function search(searchText, callback){
                var regex = new RegExp(searchText, 'gi')
                var temp = []; 
                $.each(domains, function(i, item){
                    for(var j in item)
                        if (regex.test(item[j].url))
                            temp.push(item[j].url);
                });
                callback(temp);
            }
    
            return function(searchText, callback) {
    
                if( domains ) {
                    search(searchText, callback);
                    return;
                }
    
                $.ajax({
                    url: '/scripts/models/domains.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        domains = data;
                        search(searchText, callback);
                    }
                });
    
            };
    
        })()
    
    });
    

    I didn't test the code but it doesn't spawn one ajax request everytime you release a key but instead grabs the data once and then refers to the same data.