jquery UI autocomplete 提示下拉 

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <title>Document</title>
      <script type="text/javascript" language="javascript" src="js/trirand/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="js/trirand/jquery-ui-1.10.4.js"></script>
      <link rel="stylesheet" type="text/css" media="screen" href="css/trirand/jquery-ui-1.10.4.css" />
      <style type="text/css">
        #text{
            width: 200px;
            margin: 50px auto;
            height: 36px;
            line-height: 36px;
        }

        .Eui_Prompt_list { max-height: 200px; overflow-y: auto; overflow-x: hidden; padding: 3px; }
        .Eui_Prompt_list li { height: 30px; line-height: 30px; }
        .Eui_Prompt_list a { display: block; padding: 0 5px; border: solid 1px transparent; }
        .Eui_Prompt_list a:hover { margin: 0; }
      </style>

  </head>
  <body>

　　　　<div>
        <input type="text" id=text/>
　　　　</div>
      

<script>

    $(function() {
        var projects = [
            {
                value: "j嘻嘻",
                label: "哈哈1",
                desc: "列表a"
            },
            {
                value: "j嘿嘿",
                label: "呵呵2",
                desc: "做些测试b"
            },
            {
                value: "j嗯嗯",
                label: "呃呃3",
                desc: "萌萌哒c"
            },
            {
                value: "j呼呼",
                label: "啦啦4",
                desc: "测试fd"
            }
        ];


        $('#text').autocomplete({
            delay: 0,
            minChars: 0,                //激活自动完成的输入字符数
            matchContains: true,        //只要包含输入字符就会显示提示
            autoFill: false,            //自动填充输入框
            mustMatch: true,            //与否必须与自动完成提示匹配
//            source: projects,

            source: function( request, response ) {
                // 回到 autocomplete，但是提取最后的条目

                var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
                response( $.grep( projects, function( value) {
                   return matcher.test( value.label ) || matcher.test( value.value ) || matcher.test( value.desc ) || matcher.test( value );
//                     return matcher.test( value.value );
                }));
            }
            ,
            focus: function( event, ui ) {
                return false;
            }
            ,
            select: function( event, ui ) {
                $(this).val( ui.item.value);
                return false;
            }

        }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {

            return $( "<li></li>" )
                    .append( "<a href='javascript:void(0);'>"+item.value+"</a>" )
                    .appendTo( ul );
        }

        $( "#text" ).data( "ui-autocomplete" )._resizeMenu = function() {


            var w = $( "#text").parent().outerWidth()
            this.menu.element.addClass('Eui_Prompt_list').css({'width':w})

        }

    });


</script>

  </body>

  </html>

 

posted @ 2016-10-09 11:38  一丝心情  阅读(2491)  评论(0)    收藏  举报