【发布时间】：2011-06-22 11:28:22
【问题描述】：
我希望在输入焦点后立即显示选项。有这样的设置吗？我尝试将 minLength 设置为 0，但它不起作用......它仍在等待按键。
【问题讨论】：
标签： jquery jquery-autocomplete
【发布时间】：2011-06-22 11:28:22
【问题描述】：
$("#yourField").bind('focus', function(){ $(this).autocomplete("search"); } );
这里有一个 jsfiddle：http://jsfiddle.net/fpHf4/2/ 更新了一个（针对 IE）：http://jsfiddle.net/q9ERL/4/
根据@HoldOffHunger 的启发，您还必须将 minLength 设置为 0
【讨论】：
-
你的小提琴链接到完全不同的东西。
-
抱歉，我没有保存分叉...现在已修复。
-
有效，但是在用鼠标选择一个项目后，它会第二次弹出（我猜它又把焦点重新放回了元素）。
-
嗯？我在 Firefox 和 Chromium 上对其进行了测试，但它没有第二次弹出。你用什么浏览器？
-
这（stackoverflow 的答案）对我不起作用，直到我从 jsfiddle 添加了“minLength：0”，然后它完美地工作了。
这是我的完整解决方案（它还做了其他一些事情）：
$.fn.ajaxselect = function(options) {
var settings = {
delay: 300,
sourceData: function(term) {
return {term:term};
},
sourceUrl: null,
select: function(item) {},
html: true,
minLength: 0,
autoSelect: true,
autoFocus: true,
showOnClick: null
};
if(options) $.extend(settings, options);
if(settings.showOnClick === null) settings.showOnClick = settings.minLength === 0;
$(this).autocomplete({
source: function(request, response) {
var data = settings.sourceData.call(this.element[0], request.term);
if(data === false) {
response([]);
return;
}
$.ajax({
url: settings.sourceUrl,
dataType: 'json',
data: data,
success: function(data, textStatus, $xhr) {
response(data);
},
error: function($xhr, textStatus) {
response([]);
}
});
},
focus: function(e, ui) {
return false; // don't fill input with highlighted value
},
search: function(e, ui) {
if(settings.minLength < 0 && e.hasOwnProperty('originalEvent')) return false; // don't search on keypress if minLength < 0 (use with showOnClick)
$(this).data('lastSearch', this.value);
return true;
},
select: function(e, ui) {
if(!settings.autoSelect && e.keyCode === 9) return false; // don't select highlighted item on tab unless autoSelect is enabled
if($(this).val() === $(this).data('lastSearch')) {
if(settings.select.call(this, ui.item) !== false) {
$(this).val(ui.item.value);
}
$(this).data('selectedValue',$(this).val()).trigger('change');
}
return false;
},
open: function(e, ui) {
$(this).data('isOpen', true);
},
close: function(e, ui) {
$(this).data('isOpen', false);
},
minLength: settings.minLength,
autoFocus: settings.autoFocus,
delay: settings.delay,
html: settings.html
}).bind('change.ajaxselect', function() {
$(this).toggleClass('ajax-selected', $(this).val() === $(this).data('selectedValue'));
});
if(settings.autoSelect) {
$(this).bind('autocompletechange.ajaxselect', function(event, ui) {
if($(this).val() !== $(this).data('selectedValue') && this.value.length > 0) {
var self = this;
var data = $.extend({autoSelect:1},settings.sourceData.call(this, this.value));
$(this).addClass('.ui-autocomplete-loading');
$.ajax({
url: settings.sourceUrl,
dataType: 'json',
data: data,
success: function(data, textStatus, $xhr) {
if(data.length >= 1) {
var item = $.ui.autocomplete.prototype._normalize(data)[0];
if(settings.select.call(self, item) !== false) {
$(self).val(item.value);
}
$(self).data('selectedValue',$(self).val()).trigger('change');
}
},
complete: function($xhr, textStatus) {
$(self).removeClass('.ui-autocomplete-loading');
}
});
}
});
}
if(settings.showOnClick) {
$(this).bind('click.ajaxselect', function(e) {
if(!$(this).data('clickHandled') && !$(this).data('isOpen')) {
$(this).data('clickHandled',true);
$(this).autocomplete('search','');
} else {
$(this).data('clickHandled',false);
}
}).bind('focus.ajaxselect', function(e) {
if(!$(this).data('clickHandled') && e.hasOwnProperty('originalEvent') && $(this).val() === this.defaultValue && !$(this).data('isOpen')) {
$(this).data('clickHandled',true);
$(this).autocomplete('search','');
} else {
$(this).data('clickHandled',false);
}
})
}
return $(this);
};
【讨论】：
这是一个解决方案，在选择项目后不会再次弹出打开列表（如 Mark 所述），并且在输入框已经有文本时也有效：
【讨论】：
-
这个解决方案有点小技巧。它依赖于 300 毫秒的延迟。
-
同意这不是主意，但它有效 - 我愿意接受更好的建议？
-
你可以看到我的解决方案。虽然它不仅仅是弹出搜索。它在单击或选项卡上打开它，但仅在某些条件下（例如未以编程方式触发）。我认为防止双重打开的关键是打开和关闭事件中的
$(this).data('isOpen', true)位，它将变量存储在元素本身而不是使用全局变量，这也允许您在页面上拥有多个这些变量。 -
感谢您的发布 - 我无法轻松地将您的代码集成到我的解决方案中，但正如您所说，它看起来更优雅，所以希望有人会发现它有用。
我认为你正在破坏“自动完成”实用程序只是进行风格化选择，这就是等待按键完成某些事情的原因。
我知道它不是您要寻找的分析器，请记住，您尝试使用的选项很少，如果有很多选项，您将很难在首字母上自动完成 div 加载。
或者也许你可以在你的 sql 查询中有 10 条结果记录，如果来自这个，那么在不加载所有类型的结果的情况下快速获得
---我在 ie8 上测试焦点绑定，它失败了，顺便说一下，它没有失败，它完全按照你想要的方式打开焦点上的 div 框，不同之处在于 IE 触发 onFocus 事件和 jquery 焦点事件，不像其他所以 su 必须评估焦点事件，如果字段为空的启动搜索，如果不是什么都不做。我希望这会有所帮助。
$("#yourField").bind('focus', function(){
if($(this).val()!=""){
$(this).autocomplete("search");
}
});
【讨论】：
-
这不仅仅是一个程式化的选择，因为用户仍然可以在框中输入内容，并输入未出现在列表中的内容。更像是一个组合框。我已经限制了结果，所以这不是问题。
-
好的，马克你是对的，但我编辑了我的答案，解决了 IE 存在的问题，看看..
-
应该是
==而不是!=但你的想法是对的。这会工作:) 谢谢。