首页 > 代码库 > jquery UI autocomplete 提示下拉

jquery UI autocomplete 提示下拉

2024-08-16 02:12:35   222人阅读

  <!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>        <input type="text" id=text/>      <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>

 

jquery UI autocomplete 提示下拉


联系
我们