<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0px;font-size:12px;}
.bigautocomplete-layout{
display: none;;
background-color: #FFFFFF;
border: 1px solid #BCBCBC;
position: absolute;
z-index: 100;
max-height: 220px;
overflow-x:hidden;
overflow-y:auto;
}
.bigautocomplete-layout table{
border-collapse: collapse;
border-spacing: 0;
background: none repeat scroll 0 0 #FFFFFF;
width: 100%;
cursor: default;
}
.bigautocomplete-layout table tr{
background: none repeat scroll 0 0 #FFFFFF;
}
.bigautocomplete-layout .ct{
background: none repeat scroll 0 0 #D2DEE8 !important;
}
.bigautocomplete-layout div{
word-wrap:break-word;
word-break:break-all;
padding:1px 5px;
}
</style>
<script type="text/javascript" src="http://www.javaweb.top/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.javaweb.top/js/jquery.bigautocomplete.js"></script>
<script type="text/javascript">
$(function(){
$("#tt").bigAutocomplete({width:604,data:[{title:"中国好声音",result:{ff:"qq"}},{title:"中国移动网上营业厅"},{title:"中国银行"},{title:"中国移动"},{title:"中国好声音第三期"},{title:"中国好声音 第一期"},{title:"中国电信网上营业厅"},{title:"中国工商银行"},{title:"中国好声音第二期"},{title:"中国地图"}],callback:function(data){
alert(data.title);
}});
})
</script>
</head>
<body>
<!--JS代码网头部-->
<br /><br /><br />
<center>
自定义下拉框宽度，列表为：中国好声音、中国移动网上营业厅、中国银行、中国移动、中国好声音第三期、中国好声音 第一期、中国电信网上营业厅、中国工商银行、中国好声音第二期、中国地图
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<input type="text" id="tt" style="width:600px;height:30px; line-height:30px;font-size:15px; border:2px #CCCCCC solid;" />
</center>
</body>
</html>
