jquery UI autocomplete获得焦点自动弹出跟随下拉框
2015-10-19 14:33
726 查看
之前在做项目的时候,碰到一个需求,即一个autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),查找资料后发现可以作如下处理,下面直接贴代码。
设置autocomplete样式如下:
<style>
.ui-autocomplete {
z-index: 11111;
max-height: 277px;//高度值
overflow-y: auto; //超过高度出现滚动条
/* prevent horizontal scrollbar */
overflow-x: hidden; //横向超出隐藏,如果要出现横向滚动,设置为auto即可
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
html .ui-autocomplete {
z-index: 11111;
height:auto !important;
height: 277px;
overflow-y: auto; //超过高度出现滚动条
/* prevent horizontal scrollbar */
overflow-x: hidden; //横向超出隐藏,如果要出现横向滚动,设置为auto即可
}
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");
});
设置autocomplete样式如下:
<style>
.ui-autocomplete {
z-index: 11111;
max-height: 277px;//高度值
overflow-y: auto; //超过高度出现滚动条
/* prevent horizontal scrollbar */
overflow-x: hidden; //横向超出隐藏,如果要出现横向滚动,设置为auto即可
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
html .ui-autocomplete {
z-index: 11111;
height:auto !important;
height: 277px;
overflow-y: auto; //超过高度出现滚动条
/* prevent horizontal scrollbar */
overflow-x: hidden; //横向超出隐藏,如果要出现横向滚动,设置为auto即可
}
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");
});
相关文章推荐
- jQuery子元素过滤器
- JQuery.Ajax之错误调试帮助信息
- jQuery插件开发
- ajax上传图片,仿ajaxFileUpload,解决出错和兼容问题
- jquery ajax 向后台传递数组参数示例
- jQuery过滤选择器
- jQuery
- jquery 模糊查询下拉框
- JS,Jquery获取各种屏幕的宽度和高度
- JQuery 代码规范与实例(未完成,先引用别人的,后期再总结)
- jQuery在页面加载时动态修改图片尺寸
- jQuery 实现瀑布流 个人完美版
- js与jquery异同
- 谈谈Jquery中的children find 的区别有哪些
- jquery自定义插件来实现分页的效果
- jquery中attr和prop的区别
- JQuery easyUI DataGrid 创建复杂列表头
- [转]jquery $(document).ready() 与window.onload的区别
- jquery插件layer
- jQuery EasyUI使用教程之创建一个菜单按钮