bootstrap-autocomplete

gadbee5

浏览: 26093 次
性别:
来自: 泰安

最近访客更多访客>>

zhaojianzhong_1984

aaa12365

kelly_zsl

w8700569

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript html

<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

分享到：