假设我想使用jQueryUi.autocomplete
用于制作一个从 a 获取源代码的模块backboneCollection
.
我为自动完成模块实现了以下代码(1)并且
以下为Backbone.view (2)。
实际上,我不喜欢它,因为当用户不输入任何字母时也会执行集合的获取。
我应该如何执行fetching collection
or the source function
仅当用户开始在输入框中输入内容时?
P.S.:
我已经发过类似的问题了使用 Backbone JS 的 jQuery 自动完成插件 https://stackoverflow.com/questions/11413430/jquery-autocomplete-plugin-using-backbone-js,
但由于 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'));
}
});
});