bootstrap-autocomplete
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Bootstrapҝʾ</title>
<linkrel="stylesheet"type="text/css"href="static/css/bootstrap.min.css"/>
<linkrel="stylesheet"type="text/css"href="static/css/common.css"/>
</head>
<bodystyle="padding-top:15px;">
<divclass="container">
<h2style="text-align:center;font-family:arial,helvetica,sans-serif;">Bootstrap演示</h2>
<divstyle="margin-top:30px;">
<pclass="muted">Bootstrap自动完成插件，由typeahead改造而来</p>
<divclass="input-append">
<inputtype="text"class="input-xlarge"name="matchInfo"id="matchInfo"placeholder="输入城市中文名、全拼、简拼、编码"autocomplete="off">
<buttonclass="btn"type="button"id="goBtn">Go!</button>
</div>
</div>
</div>
<divclass="navbar-fixed-bottomfooter">DevBy<ahref="http://digdata.me"title="发掘数据的魅力">DigData</a></div>
<scripttype="text/javascript"src="static/js/jquery.js"></script>
<scripttype="text/javascript"src="static/js/bootstrap.min.js"></script>
<scripttype="text/javascript"src="static/js/jquery.placeholder.min.js"></script>
<scripttype="text/javascript"src="static/js/bootstrap.autocomplete.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
varpatrn=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
var_bankAccts=[
{name:"北京",id:'1'},
{name:"北海",id:'2'},
{name:"北冥",id:'3'},
{name:"淮北",id:'4'},
{name:"海城",id:'5'},
{name:"上饶",id:'6'},
{name:"海口",id:'7'},
{name:"上海",id:'8'}
];
$('#matchInfo').autocomplete({
source:function(query,process){
if(!patrn.exec(query)){
return;
}
vara=newArray();
for(vari=0;i<_bankAccts.length;i++){
if(query==''||_bankAccts[i].name.indexOf(query)>=0||_bankAccts[i].id.indexOf(query)>=0){
a.push(_bankAccts[i]);
}
}
returna;
},
formatItem:function(item){
returnitem.name+'('+item.id+')';
},
setValue:function(item){
return{
'data-value':item.name,
'real-value':item.id
};
},
minLength:1,
items:3
});
$("#goBtn").click(function(){
varregionCode=$("#matchInfo").attr("real-value")||"";
alert(regionCode);
});
});
</script>
</body>
</html>
见http://www.oschina.net/code/snippet_219811_19025