jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框 

$("#search").autocomplete({
            minLength: 0,
            source: function(request,response){
                // request对象只有一个term属性，对应用户输入的文本
                // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
                var dataObj = kwplan._getjsondata(request);
                response(dataObj);            
            },
            focus :function () {                    
                 return false;
              },
             select: function(event, ui){            
                 $this = $(this);
                // 这里的this指向当前输入框的DOM元素
                // event参数是事件对象
                // ui对象只有一个item属性，对应数据源中被选中的对象
                var event = event||window.event;
                this.value = ui.item.label;
                $("#teacherid").val(ui.item.category);
                // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
                event.preventDefault(); 
                setTimeout(function () {              
                    $this.blur();
                   }, 1);
              }
    }).focus(function(){
                 $(this).autocomplete("search");
                 return false;
   }    
);
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Categories</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.9.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.menu.js"></script>
    <script src="../../ui/jquery.ui.autocomplete.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    .ui-autocomplete-category {
        font-weight: bold;
        padding: .2em .4em;
        margin: .8em 0 .2em;
        line-height: 1.5;
    }
    </style>

    <script>

        var data = [
            { label: "anders", category: "" },
            { label: "andreas", category: "" },
            { label: "antal", category: "" },
            { label: "annhhx10", category: "Products" },
            { label: "annk K12", category: "Products" },
            { label: "annttop C13", category: "Products" },
            { label: "anders andersson", category: "People" },
            { label: "andreas andersson", category: "People" },
            { label: "andreas johnson", category: "People" }
        ];
        
        
        
function dynamicAutocomplete(){
            $("#search").autocomplete({
            minLength: 0,
            source: data,
                focus :function () {                     
                   return false;
                },
                select: function(event, ui){            
             $this = $(this);
            setTimeout(function () {               
                $this.blur();
               }, 1);
          }
            }).focus(function(){
                 $(this).autocomplete("search");
                 return false;
            }    
        );
    };


    </script>    
</head>
<body>
<button onclick="dynamicAutocomplete()">autocomplete</button> <br />
<label for="search">Search: </label>
<input id="search">

<div class="demo-description">
<p>A categorized search result. Try typing "a" or "n".</p>
</div>
</body>
</html>

 

posted @ 2017-07-14 15:27  wanzij  阅读(1724)  评论(0)    收藏  举报
TOP