jQuery Autocomplete 模糊搜索
呼延衡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevBridge Autocomplete Demo</title>
//样式
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h1>Ajax Autocomplete Demo</h1>
<div style="position: relative; height: 80px;">
<input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mockjax.js"></script>
<script type="text/javascript" src="src/jquery.autocomplete.js"></script>
//本地数据
<script type="text/javascript" src="scripts/countries.js"></script>
</body>
</html>
var countries = {
"AD": "Andorra",
"A2": "Andorra Test",
"AE": "United Arab Emirates",
}
/*------------------------------------------模糊查询搜索插件----------------------------------------------------------------------------------*/
//转换制定需要的格式 [{"value":"haha","data":"1"},{"value":"hh","data":"2"}]
var data = $.map(countries, function (value, key) { return { value: value, data: key }; });
// Initialize ajax autocomplete:
$('#autocomplete-ajax').autocomplete({
// serviceUrl: '/autosuggest/service/url',
//本地数据
lookup: data,
//第1项是否被选择
autoSelectFirst:true,
//触发下拉的最少字符
minChars:0,
//选择时触发的函数
onSelect: function(suggestion) {
// $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
console.log(suggestion.data)
stcd=suggestion.data
city=suggestion.value
},
});
/*------------------------------------------模糊查询搜索插件结束----------------------------------------------------------------------------------*/
类似资料：