如何让 jQuery 自动完成在字段焦点上弹出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4917195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get jQuery Autocomplete to pop up on field focus?
提问by mpen
Possible Duplicate:
jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything
I want the options to appear as soon as my input is focused. Is there a setting for that? I tried setting minLength to 0, but it doesn't work... it still waits for a keypress.
我希望选项在我的输入集中后立即出现。有没有设置？我尝试将 minLength 设置为 0，但它不起作用……它仍在等待按键。
回答by Pierre
$("#yourField").bind('focus', function(){ $(this).autocomplete("search"); } );
Here a jsfiddle: http://jsfiddle.net/fpHf4/2/Updated one (for IE): http://jsfiddle.net/q9ERL/4/
这里有一个 jsfiddle：http: //jsfiddle.net/fpHf4/2/更新了一个（对于 IE）：http: //jsfiddle.net/q9ERL/4/
As enlighted by @HoldOffHunger you must also set minLength to 0
正如@HoldOffHunger 所启发的，您还必须将 minLength 设置为 0
回答by Camilo Lizarazo
I think u are breaking "autocomplete" utility just making a stylized select, thats the reason to wait for a keypress to have something to complete.
我认为您正在破坏“自动完成”实用程序只是进行风格化选择，这就是等待按键完成某些操作的原因。
I know its not the anser u looking for, just remember this u trying to do just work with few options, if there are many u will get hard autocomple div load on firsts letters.
我知道这不是您要找的分析器，请记住，您尝试使用的选项很少，如果有很多选项，您将在第一个字母上遇到困难的自动完成 div 负载。
Or maybe u can have a 10 result records on ur sql query if is from this so get fast without loading all sort of results
或者也许你可以在你的 sql 查询上有 10 条结果记录，如果来自这个，所以在不加载所有结果的情况下快速获取
--- I test focus bind on ie8, it fails, by the way its no a fail it does exactly what u want open div box on focus, the difference is that IE fires onFocus event whith jquery focus event, not like the others so su must evaluate on focus event if field its empty launch search , if is not just do nothing.. i hope this helps.
--- 我在 ie8 上测试焦点绑定，它失败了，顺便说一句，它没有失败，它完全按照你想要的方式打开 div 框，不同之处在于 IE 触发 onFocus 事件，而 jquery 焦点事件，不像其他人那样su 必须评估焦点事件，如果字段为空启动搜索，如果不是什么都不做……我希望这会有所帮助。
$("#yourField").bind('focus', function(){
if($(this).val()!=""){
$(this).autocomplete("search");
}
});
回答by Dunc
Here's a solution that doesn't pop open the list a second time after selecting an item (as mentioned by Mark) and also works when the input box already has text:
这是一个解决方案，在选择一个项目后不会再次弹出打开列表（如 Mark 所述），并且在输入框已经有文本时也有效：
回答by mpen
Here's my full solution (it does a few other things too):
这是我的完整解决方案（它也做了一些其他的事情）：
$.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);
};
