使用jQueryUI.autocomplete和主干JS模块的Javascript模块

Question

假设我想使用jQueryUi.autocomplete来制作一个从backboneCollection获取源代码的模块。

我对自动完成模块执行以下代码（1），对于Backbone.view（2）执行以下代码（
）。

实际上，我不喜欢它，因为在用户没有输入任何字母时也会执行集合的提取。

只有当用户开始在输入框中输入内容时，我应该如何执行fetching collection或source function？

---

P.S：
我已经发布了类似的问题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')); 
     } 
    }); 
}); 

Answer 1

//

伪代码从jQuery Autocomplete Plugin using Backbone JS

var MyView = Backbone.View.extend({ 
initialize: function() { 
    this.myCollection = new MyCollection(); 

}, 
events: { 
    'focus #names': 'getAutocomplete', 
    'keydown #names':'invokefetch' 
}, 
invokefetch : function(){ 
    this.myCollection.fetch(); 
    $("#names").unbind("keydown", invokefetch); 
},  
getAutocomplete: function() { 
    $("#names").autocomplete({ 
     source: JSON.stringify(this.myCollection) 
    }); 
} 

}）;

EDIT-20120711 --------- 这个怎么样：

//伪代码...

// View1 (view using the module autocomplete) 
define([ 
    'autoCompleteModule' 
], function (autoCompleteModule) { 
    var MyView = Backbone.View.extend({ 

     events: { 
      'keydown #names': 'getAutocomplete' 
     }, 
     getAutocomplete: function (e) { 
      var el = $('#names'); 
      if(!el.data){ 
       autoCompleteModule(el); 
      } 
     } 
    }); 
});