<!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>
