324 lines
15 KiB
HTML
324 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<th:block th:include="include :: header('搜索自动补全')" />
|
||
</head>
|
||
<body class="gray-bg">
|
||
<div class="wrapper wrapper-content animated fadeInRight">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<p>展示下拉菜单按钮。</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" id="suggest-demo-1">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-white dropdown-toggle" style="height: 31px" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p>不展示下拉菜单按钮。</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" id="suggest-demo-2">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p>前端json中获取数据</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" id="suggest-demo-3">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-white dropdown-toggle" style="height: 31px" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||
</ul>
|
||
</div>
|
||
<!-- /btn-group -->
|
||
</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-white dropdown-toggle" style="height: 31px" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||
</ul>
|
||
</div>
|
||
<!-- /btn-group -->
|
||
</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-white dropdown-toggle" style="height: 31px" data-toggle="dropdown">
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||
</ul>
|
||
</div>
|
||
<!-- /btn-group -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<div class="form-group">
|
||
<label class="font-noraml">相关参数详细信息</label>
|
||
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<p>通过数据属性的基本示例。</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
|
||
<p>通过javascript的基本示例。</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
<p>通过javascript的复杂示例。</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
<p>后台url中获取简单数据</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
<div class="form-group">
|
||
<label class="font-noraml">相关参数详细信息</label>
|
||
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<th:block th:include="include :: footer" />
|
||
<th:block th:include="include :: bootstrap-suggest-js" />
|
||
<th:block th:include="include :: bootstrap-typeahead-js" />
|
||
<script type="text/javascript">
|
||
|
||
var testBsSuggest = $("#suggest-demo-1").bsSuggest({
|
||
url: ctx + "demo/form/userModel",
|
||
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 = $("#suggest-demo-2").bsSuggest({
|
||
url: ctx + "demo/form/userModel",
|
||
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");
|
||
});
|
||
|
||
//data 数据中获取
|
||
var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
|
||
indexId: 1,
|
||
indexKey: 2,
|
||
data: {
|
||
'value': [
|
||
{
|
||
'userId': '1',
|
||
'userCode': '1000001',
|
||
'userName': '测试1',
|
||
'userPhone': '15888888888'
|
||
},
|
||
{
|
||
'userId': '2',
|
||
'userCode': '1000002',
|
||
'userName': '测试2',
|
||
'userPhone': '15888888888'
|
||
},
|
||
{
|
||
'userId': '3',
|
||
'userCode': '1000003',
|
||
'userName': '测试3',
|
||
'userPhone': '15888888888'
|
||
},
|
||
{
|
||
'userId': '4',
|
||
'userCode': '1000004',
|
||
'userName': '测试4',
|
||
'userPhone': '15888888888'
|
||
},
|
||
{
|
||
'userId': '5',
|
||
'userCode': '1000005',
|
||
'userName': '测试5',
|
||
'userPhone': '15888888888'
|
||
}
|
||
],
|
||
'defaults': 'http://ruoyi.vip'
|
||
}
|
||
});
|
||
|
||
//百度搜索测试
|
||
var baiduBsSuggest = $("#baidu").bsSuggest({
|
||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||
multiWord: true, //以分隔符号分割的多关键字支持
|
||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||
url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
|
||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||
jsonp: 'cb',
|
||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||
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';
|
||
|
||
//字符串转化为 js 对象
|
||
return data;
|
||
}
|
||
});
|
||
|
||
//淘宝搜索建议测试
|
||
var taobaoBsSuggest = $("#taobao").bsSuggest({
|
||
indexId: 2, // data.value 的第几个数据，作为input输入框的内容
|
||
indexKey: 1, // data.value 的第几个数据，作为input输入框的内容
|
||
allowNoKeyword: false, // 是否允许无关键字时请求数据
|
||
hideOnSelect: true, // 鼠标从列表单击选择了值时，是否隐藏选择列表
|
||
multiWord: true, // 以分隔符号分割的多关键字支持
|
||
separator: ",", // 多关键字支持时的分隔符，默认为空格
|
||
getDataMethod: "url", // 获取数据的方式，总是从 URL 获取
|
||
effectiveFieldsAlias: {
|
||
Id: "序号",
|
||
Keyword: "关键字",
|
||
Count: "数量"
|
||
},
|
||
showHeader: true,
|
||
url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
|
||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||
jsonp: 'callback',
|
||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||
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;
|
||
}
|
||
});
|
||
|
||
$('#typeahead-demo-1').typeahead({
|
||
source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
|
||
});
|
||
|
||
$('#typeahead-demo-2').typeahead({
|
||
source: [
|
||
{"name": "Afghanistan", "code": "AF", "ccn0": "040"},
|
||
{"name": "Land Islands", "code": "AX", "ccn0": "050"},
|
||
{"name": "Albania", "code": "AL","ccn0": "060"},
|
||
{"name": "Algeria", "code": "DZ","ccn0": "070"}
|
||
]
|
||
});
|
||
|
||
$.get(ctx + "demo/form/collection", function(data){
|
||
$("#typeahead-demo-3").typeahead({
|
||
source: data.value
|
||
});
|
||
},'json');
|
||
</script>
|
||
</body>
|
||
</html>
|