您的位置:首页 > Web前端 > JQuery

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");

    });
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: