Javascript 如何使用Ajax过滤JSON数据以进行自动建议（没有jQuery ui）

我试图从头开始创建一个自动建议。我使用canjs控制器来控制DOM元素（ul和li）。 我希望智能和简短的代码来实现这一点。我已经尝试过使用filter，但我希望Ajax filter方法可以用于此目的

我试过以下方法：

can.型号：

 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;
            }

});

这是我的can控制器：

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);
             })     

过去两天我一直在努力寻找。我不可能做到这一点。有人能告诉我代码中的错误在哪里以及如何解决吗

---

提前谢谢

我可能会这样做：

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);
                }
            });

        };

    })()

});

---

我没有测试代码，但它不会在每次释放密钥时生成一个ajax请求，而是捕获一次数据，然后引用相同的数据。

因为您没有使用“params”（searchText）参数执行任何操作。每次释放一个键时发送一个完整的ajax请求也不是很好，尤其是当搜索文本根本没有改变时。@SebastianNette:Thanx谢谢你的回复。事实上，我已经做了过滤，但我想要更少和准确的代码。我已经更新了我的代码。请告诉我是否有任何选项可以减少此代码？如果您在服务器端而不是客户端进行筛选会更好。但是如果您想过滤客户端，那么缓存响应，而不是一直检索整个未更改的文档。现在您正在创建一个正则表达式，但没有使用它。if（regex.test（item[j].url））temp.push（item[j].url）@塞巴斯蒂安妮特：thanx要指出关于正则表达式的问题。我只是忘记了测试函数。第二件事，你能告诉我更多关于缓存的信息吗？或者你能给我建议一些资源，我可以从中完成我的需求。这只是意味着，在你第一次检索列表后，你将它保存在内存中，然后在下一次释放密钥时引用它，而不是再次检索它