咱们来看这段给#foo元素初始化jQuery UI Autocomplete组件的代码，里面配置了不少针对性的自定义行为：

$('#foo').autocomplete({ 
    delay: 0, 
    minLength: 1, 
    source: self.loadUsers.bind(self), 
    select: function(event, ui) { 
        $(this).autocomplete('widget').hide(); 
        var selected = ui.item; 
        var element = selected.element; 
        // more stuff here 
    }, 
    focus: function() { return false; }, 
    open: function() { console.log('Opening menu...'); } 
})

下面来拆解下这些配置和事件的作用：

• delay: 0：输入内容一变化就立刻触发搜索，完全没有延迟
• minLength: 1：输入框里至少得有1个字符，才会启动搜索逻辑
• source: self.loadUsers.bind(self)：把loadUsers方法作为数据源，用bind(self)保证方法内部的this指向当前上下文，避免出现指向错误
• select 事件回调：当选中下拉里的选项时执行这些操作：
  • 先把自动补全的下拉面板藏起来：$(this).autocomplete('widget').hide();
  • 接着获取选中的项和对应的元素，后面可以在这里继续添加业务逻辑
• focus 事件：返回false，直接阻止了默认的聚焦行为——比如默认情况下选中选项时会自动把内容填到输入框，这个配置就把这个行为关掉了
• open 事件：当下拉菜单打开的时候，会在控制台打印Opening menu...的日志

目前这个配置的运行效果是：只要#foo里的文本一变化，组件就会执行搜索，而且能正确调用loadUsers方法；focus和open事件也都会按照配置正常触发。

内容的提问来源于stack exchange，提问作者Luis Masuelli