之前在做專案的時候，碰到一個需求，即一個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");
    });