You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
323 lines
14 KiB
323 lines
14 KiB
<!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" 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" 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" 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" 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>
|
|
|