让我们假设我想用jQueryUi.autocomplete
制作该采取从源头模块backboneCollection
。
我实施的自动完成模块下面的代码(1)和
为Backbone.view下述(2)。
实际上,由于还执行收集的抓取,当用户不输入任何字母,我不喜欢它。
我应该如何进行fetching collection
或source function
只有当用户开始输入,在输入框中的东西吗?
PS:
我已经发布了类似的问题, 利用骨干JS jQuery的自动完成插件 ,但由于aoutocomplete模块的需求,可以在不同视图之间进行共享,我决定移动获取中自动完成模块的集合。
(1)
/*global define */
define([
'users',
'jquery',
'jqueryUi'
], function (UserCollection, $) {
"use strict";
var autoComplete = function(element) {
var userCollection,
data;
userCollection = new UserCollection();
userCollection.fetch();
data = userCollection.toJSON();
element.autocomplete({
minLength: 3,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(data, function(value) {
return matcher.test(value.name);
}));
},
create: function() {
element.val(data.name);
},
focus: function(event, ui) {
element.val(ui.item.name);
return false;
},
select: function(event, ui) {
element.val(ui.item.name);
return false;
}
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
.appendTo(ul);
};
};
return autoComplete;
});
(2)
// View1 (view using the module autocomplete)
define([
'autoCompleteModule'
], function (autoCompleteModule) {
var MyView = Backbone.View.extend({
events: {
'focus #names': 'getAutocomplete'
},
getAutocomplete: function (e) {
autoCompleteModule($('#names'));
}
});
});