<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Bootstrap 搜索建议插件
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件">
<meta name="Keywords" content="Bootstrap Search Suggest,bootstrap,搜索建议插件"/>
<meta name="author" content="lizhiwen@meizu.com">
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>bootstrap combox 搜索建议插件
</h2>
<p>这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件.
</p>
<p>使用说明：
<a href="README.html" target="_blank">README.html
</a> <a href="https://github.com/lzwme/bootstrap-suggest-plugin" target="_blank">Github
</a></p>
<form action="index_submit" method="get" accept-charset="utf-8" role="form">
<h3>测试(URL 获取)
</h3>
<p>配置了 data-id，非下拉菜单选择输入则背景色警告。
</p>
<div class="row">
<div class="col-lg-2">
<div class="input-group">
<input type="text" class="form-control" id="test">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
</div>
</div>
</div>
<h3>测试(URL 获取)
</h3>
<p>不展示下拉菜单按钮。
</p>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" id="testNoBtn">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
</div>
</div>
</div>
<h3>测试(json 数据中获取)
</h3>
<p>默认启用空关键字检索。
</p>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" id="test_data">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
</div>
</div>
</div>
<h3>百度搜索
</h3>
<p>支持逗号分隔多关键字
</p>
<div class="row">
<div class="col-lg-6">
<div class="input-group" style="width: 300px;">
<input type="text" class="form-control" id="baidu">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
</div>
</div>
</div>
<h3>淘宝搜索
</h3>
<p>支持逗号分隔多关键字
</p>
<div class="row">
<div class="col-lg-6">
<div class="input-group" style="width: 400px;">
<input type="text" class="form-control" id="taobao">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="bootstrap-suggest.js"></script>
<script type="text/javascript">
var testBsSuggest = $("#test").bsSuggest({
url: "data.json",
idField: "userId",
keyField: "userName"
}).on('onDataRequestSuccess', function (e, result) {
console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, keyword) {
console.log('onSetSelectValue: ', keyword);
}).on('onUnsetSelectValue', function (e) {
console.log("onUnsetSelectValue");
});
var testBsSuggest = $("#testNoBtn").bsSuggest({
url: "data.json",
showBtn: false,
idField: "userId",
keyField: "userName"
}).on('onDataRequestSuccess', function (e, result) {
console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, keyword) {
console.log('onSetSelectValue: ', keyword);
}).on('onUnsetSelectValue', function (e) {
console.log("onUnsetSelectValue");
});
var testdataBsSuggest = $("#test_data").bsSuggest({
indexId: 2,
indexKey: 1,
data: {
'value':[
{'id':'0','word':'lzw','description':'http://lzw.me'},
{'id':'1','word':'lzwme','description':'http://w.lzw.me'},
{'id':'2','word':'meizu','description':'http://www.meizu.com'},
{'id':'3','word':'flyme','description':'http://flyme.meizu.com'}
],
'defaults':'http://lzw.me'
}
});
var baiduBsSuggest = $("#baidu").bsSuggest({
allowNoKeyword: false,
multiWord: true,
separator: ",",
getDataMethod: "url",
url: 'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd=',
jsonp: 'cb',
processData: function (json) {
var i, len, data = {value: []};
if (!json || !json.s || json.s.length === 0) {
return false;
}
console.log(json);
len = json.s.length;
jsonStr = "{'value':[";
for (i = 0; i < len; i++) {
data.value.push({
word: json.s[i]
});
}
data.defaults = 'baidu';
return data;
}
});
var taobaoBsSuggest = $("#taobao").bsSuggest({
indexId: 2,
indexKey: 1,
allowNoKeyword: false,
multiWord: true,
separator: ",",
getDataMethod: "url",
showHeader: true,
effectiveFieldsAlias:{Id: "序号", Keyword: "关键字", Count: "数量"},
url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
jsonp: 'callback',
processData: function(json){
var i, len, data = {value: []};
if(!json || !json.result || json.result.length == 0) {
return false;
}
console.log(json);
len = json.result.length;
for (i = 0; i < len; i++) {
data.value.push({
"Id": (i + 1),
"Keyword": json.result[i][0],
"Count": json.result[i][1]
});
}
console.log(data);
return data;
}
});
$("form").submit(function(e) {
return false;
});
</script>
</body>
</html>
配置参数 参数列表中的值均为插件默认值
{
url:
null,
jsonp:
null,
data: {},
getDataMethod:
"firstByUrl",
indexId:
0,
indexKey:
0,
idField:
"",
keyField:
"",
effectiveFields: [],
effectiveFieldsAlias: {},
searchFields: [],
showHeader:
false,
showBtn:
true,
allowNoKeyword:
true,
multiWord:
false,
separator:
",",
processData: processData,
getData: getData,
autoMinWidth:
false,
listAlign:
"left",
inputBgColor:
'',
inputWarnColor:
"rgba(255,0,0,.1)",
listStyle: {
"padding-top":
0,
"max-height":
"375px",
"max-width":
"800px",
"overflow":
"auto",
"width":
"auto",
"transition":
"0.3s",
"-webkit-transition":
"0.3s",
"-moz-transition":
"0.3s",
"-o-transition":
"0.3s"
},
listHoverStyle:
'background: #07d; color:#fff',
listHoverCSS:
"jhover",
keyLeft:
37,
keyUp:
38,
keyRight:
39,
keyDown:
40,
keyEnter:
13
}
