jquery UI autocomplete获得焦点自动弹出跟随下拉框

最新推荐文章于 2026-04-05 02:14:49 发布

原创最新推荐文章于 2026-04-05 02:14:49 发布 · 9.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

本文介绍了如何在jQuery UI的autocomplete组件中，实现获取焦点时自动显示下拉列表。通过设置样式和JavaScript代码，可以使得autocomplete控件在获得焦点时即展示下拉选项，而不仅仅是用户输入后。同时，代码还处理了高度限制和滚动条显示，以及焦点事件的响应。

之前在做项目的时候，碰到一个需求，即一个autocomplete控件，当点击获得焦点的时候也要弹出下拉列表（autocomplete默认是输入之后才会跟随出下拉列表），查找资料后发现可以作如下处理，下面直接贴代码。

设置autocomplete样式如下：

JS代码如下

$("#editRlEduEdition").autocomplete({
scroll:true,

minLength:0,
focus :function () {
return false;
},
select: function(event, ui){
$this = $(this);
setTimeout(function () {
$this.blur();
}, 1);
},
autoFocus: false,
source: function(request, response) {
var inputPublishName = $("#editRLPublish").val();
var inputZYBBName = $("#editRlEdition").val();
var inputEduName = $("#editRlEduEdition").val();
var d = {
"publishName":inputPublishName,
"editionName":inputZYBBName,
"eduEditionName":inputEduName
};
$.ajax({
type : "POST",
url : ctx + "/sys/nrmpEduEdition/getEduEditionByName",
contentType : 'application/json',
dataType : 'json',
async : true,
data:JSON.stringify(d),
success: function( data ) {
if(null != data){
var b = data.value;
var arr = new Array();
var count = 0;
for(var a in b){
arr.push(a);
count ++;
}
response(arr);
}
}
});
}
}).focus(function () {
$(this).autocomplete("search");
});