[英]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).
我正在使用 canjs 控制器来控制 DOM 元素(ul 和 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.
我尝试过使用过滤器,但我希望 Ajax 过滤器方法用于此目的。
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:这是我的 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!!提前谢谢!!
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.我没有测试代码,但它不会在您每次释放密钥时产生一个 ajax 请求,而是获取一次数据,然后引用相同的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.