bootstrap-autocomplete

最新推荐文章于 2024-06-05 09:56:46 发布

gadbee5

最新推荐文章于 2024-06-05 09:56:46 发布

阅读量1.7k

点赞数

文章标签： JavaScript html ViewUI

本文链接：https://blog.csdn.net/gadbee5/article/details/84512309

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrapҝʾ</title>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/css/common.css" />
</head>
<body style="padding-top: 15px;">
<div class="container">
<h2 style="text-align: center;font-family: arial,helvetica,sans-serif;">Bootstrap演示</h2>
<div style="margin-top:30px;">
<p class="muted">Bootstrap自动完成插件，由typeahead改造而来</p>
<div class="input-append">
<input type="text" class="input-xlarge" name="matchInfo" id="matchInfo" placeholder="输入城市中文名、全拼、简拼、编码" autocomplete="off">
<button class="btn" type="button" id="goBtn">Go!</button>
</div>
</div>

</div>

<div class="navbar-fixed-bottom footer">Dev By <a href="http://digdata.me" title="发掘数据的魅力">DigData</a></div>
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var patrn=/[\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 ;
}

var a = new Array();
for ( var i = 0; i < _bankAccts.length; i++) {
if (query == '' || _bankAccts[i].name.indexOf(query) >= 0 || _bankAccts[i].id.indexOf(query) >= 0) {
a.push(_bankAccts[i]);
}
}
return a;
},
formatItem: function(item) {
return item.name + '(' + item.id + ')';
},
setValue: function(item) {
return {
'data-value' : item.name,
'real-value' : item.id
};
},
minLength: 1 ,
items: 3
});

$("#goBtn").click(function(){
var regionCode = $("#matchInfo").attr("real-value") || "";
alert(regionCode);
});
});
</script>
</body>
</html>

见http://www.oschina.net/code/snippet_219811_19025

gadbee5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-autocomplete

Bootstrapҝʾ Bootstrap演示 Bootstrap自动完成插件，由typeahead改造而来 Go! Dev By DigData$(document).ready(function(){ var patrn=/[\u4E00...
复制链接

扫一扫