suggest.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <!--360浏览器优先以webkit内核解析-->
  7. <title>H+ 后台主题UI框架 - 搜索建议</title>
  8. <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
  9. <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
  10. <link href="css/animate.css" rel="stylesheet">
  11. <link href="css/style.css?v=4.1.0" rel="stylesheet">
  12. </head>
  13. <body class="gray-bg">
  14. <div class="wrapper wrapper-content">
  15. <div class="row">
  16. <div class="col-sm-6">
  17. <div class="ibox float-e-margins">
  18. <div class="ibox-title">
  19. <h5>combox 搜索建议插件</h5>
  20. <div class="ibox-tools">
  21. <a class="collapse-link">
  22. <i class="fa fa-chevron-up"></i>
  23. </a>
  24. <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
  25. <i class="fa fa-wrench"></i>
  26. </a>
  27. <ul class="dropdown-menu dropdown-user">
  28. <li><a href="buttons.html#">选项1</a>
  29. </li>
  30. <li><a href="buttons.html#">选项2</a>
  31. </li>
  32. </ul>
  33. <a class="close-link">
  34. <i class="fa fa-times"></i>
  35. </a>
  36. </div>
  37. </div>
  38. <div class="ibox-content">
  39. <p>这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件.</p>
  40. <p>使用说明:<a href="https://github.com/lzwme/bootstrap-suggest-plugin" target="_blank">https://github.com/lzwme/bootstrap-suggest-plugin</a>
  41. </p>
  42. <form action="index_submit" method="get" accept-charset="utf-8" role="form">
  43. <hr>
  44. <h3>测试(URL 获取)</h3>
  45. <p>配置了 data-id,非下拉菜单选择输入则背景色警告。</p>
  46. <div class="row">
  47. <div class="col-lg-6">
  48. <div class="input-group">
  49. <input type="text" class="form-control" id="test">
  50. <div class="input-group-btn">
  51. <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
  52. <span class="caret"></span>
  53. </button>
  54. <ul class="dropdown-menu dropdown-menu-right" role="menu">
  55. </ul>
  56. </div>
  57. <!-- /btn-group -->
  58. </div>
  59. </div>
  60. </div>
  61. <hr>
  62. <h3>测试(URL 获取)</h3>
  63. <p>不展示下拉菜单按钮。</p>
  64. <div class="row">
  65. <div class="col-lg-6">
  66. <div class="input-group">
  67. <input type="text" class="form-control" id="testNoBtn">
  68. <div class="input-group-btn">
  69. <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
  70. <span class="caret"></span>
  71. </button>
  72. <ul class="dropdown-menu dropdown-menu-right" role="menu">
  73. </ul>
  74. </div>
  75. <!-- /btn-group -->
  76. </div>
  77. </div>
  78. </div>
  79. <hr>
  80. <h3>测试(json 数据中获取)</h3>
  81. <p>默认启用空关键字检索。</p>
  82. <div class="row">
  83. <div class="col-lg-6">
  84. <div class="input-group">
  85. <input type="text" class="form-control" id="test_data">
  86. <div class="input-group-btn">
  87. <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
  88. <span class="caret"></span>
  89. </button>
  90. <ul class="dropdown-menu dropdown-menu-right" role="menu">
  91. </ul>
  92. </div>
  93. <!-- /btn-group -->
  94. </div>
  95. </div>
  96. </div>
  97. <hr>
  98. <h3>百度搜索</h3>
  99. <p>支持逗号分隔多关键字</p>
  100. <div class="row">
  101. <div class="col-lg-6">
  102. <div class="input-group" style="width: 300px;">
  103. <input type="text" class="form-control" id="baidu">
  104. <div class="input-group-btn">
  105. <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
  106. <span class="caret"></span>
  107. </button>
  108. <ul class="dropdown-menu dropdown-menu-right" role="menu">
  109. </ul>
  110. </div>
  111. <!-- /btn-group -->
  112. </div>
  113. </div>
  114. </div>
  115. <hr>
  116. <h3>淘宝搜索</h3>
  117. <p>支持逗号分隔多关键字</p>
  118. <div class="row">
  119. <div class="col-lg-6">
  120. <div class="input-group" style="width: 400px;">
  121. <input type="text" class="form-control" id="taobao">
  122. <div class="input-group-btn">
  123. <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
  124. <span class="caret"></span>
  125. </button>
  126. <ul class="dropdown-menu dropdown-menu-right" role="menu">
  127. </ul>
  128. </div>
  129. <!-- /btn-group -->
  130. </div>
  131. </div>
  132. </div>
  133. </form>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="col-sm-6">
  138. <div class="ibox float-e-margins">
  139. <div class="ibox-title">
  140. <h5>使用说明</h5>
  141. <div class="ibox-tools">
  142. <a class="collapse-link">
  143. <i class="fa fa-chevron-up"></i>
  144. </a>
  145. <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
  146. <i class="fa fa-wrench"></i>
  147. </a>
  148. <ul class="dropdown-menu dropdown-user">
  149. <li><a href="buttons.html#">选项1</a>
  150. </li>
  151. <li><a href="buttons.html#">选项2</a>
  152. </li>
  153. </ul>
  154. <a class="close-link">
  155. <i class="fa fa-times"></i>
  156. </a>
  157. </div>
  158. </div>
  159. <div class="ibox-content">
  160. <article class="markdown-body entry-content" itemprop="mainContentOfPage">
  161. <h1><a id="user-content-bootstrap-search-suggest" class="anchor" href="#bootstrap-search-suggest" aria-hidden="true"><span class="octicon octicon-link"></span></a>Bootstrap Search Suggest</h1>
  162. <p>这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件,必须使用于按钮式下拉菜单组件上。</p>
  163. <h2>功能说明</h2>
  164. <ul>
  165. <li>搜索方式:从 data.value 的有效字段数据中查询 keyword 的出现,或字段数据包含于 keyword 中</li>
  166. <li>支持单关键字、多关键字的输入搜索建议,多关键字可自定义分隔符</li>
  167. <li>支持按 data 数组数据搜索、按 URL 请求搜索和按首次请求URL数据并缓存搜索三种方式【getDataMethod】</li>
  168. <li>单关键字会设置 data-id 和输入框内容两个值,以 indexId/idField 和 indexKey/idFiled 取值 data 的数据为准;多关键字只设置输入框值</li>
  169. </ul>
  170. <h2>快速上手</h2>
  171. <ol>
  172. <li>引入 jQuery、bootstrap.min.css、bootstrap.min.js</li>
  173. <li>引入插件js: <code>bootstrap-suggest.min.js</code>
  174. </li>
  175. <li>初始化插件</li>
  176. </ol>
  177. <pre>var bsSuggest = $("input#test").bsSuggest({
  178. url: "/rest/sys/getuserlist?keyword="
  179. })</pre>
  180. <p>具体使用请参考参数配置说明及demo 示例页面源码(<a href="http://lzw.me/pages/demo/bootstrap-suggest-plugin">Demo</a>)</p>
  181. <h4>方法调用</h4>
  182. <ol>
  183. <li>禁用提示: <code>$("input#test").bsSuggest("disable");</code>
  184. </li>
  185. <li>启用提示: <code>$("input#test").bsSuggest("enable");</code>
  186. </li>
  187. <li>销毁插件: <code>$("input#test").bsSuggest("destroy");</code>
  188. </li>
  189. </ol>
  190. <h4><a class="anchor"><span class="octicon octicon-link"></span></a>事件监听</h4>
  191. <p>dataRequestSuccess: 当 AJAX 请求数据成功时触发,并传回结果到第二个参数</p>
  192. <pre>$("input#test").on("dataRequestSuccess", function (event, result) {
  193. console.log(result);
  194. });</pre>
  195. <p>onSetSelectValue:当从下拉菜单选取值时触发,并传回设置的数据到第二个参数 onUnsetSelectValue:当设置了 idField,且自由输入内容时触发(与背景警告色显示同步)</p>
  196. <h2>配置参数</h2>
  197. <p>参数列表中的值均为插件默认值</p>
  198. <pre>{
  199. url: null, //请求数据的 URL 地址
  200. jsonp: null, //设置此参数名,将开启jsonp功能,否则使用json数据结构
  201. data: {}, //提示所用的数据
  202. getDataMethod: "firstByUrl", //获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取
  203. indexId: 0, //每组数据的第几个数据,作为input输入框的 data-id,设为 -1 且 idField 为空则不设置此值
  204. indexKey: 0, //每组数据的第几个数据,作为input输入框的内容
  205. idField: "", //每组数据的哪个字段作为 data-id,优先级高于 indexId 设置(推荐)
  206. keyField: "", //每组数据的哪个字段作为输入框内容,优先级高于 indexKey 设置(推荐)
  207. effectiveFields: [], //有效显示于列表中的字段,非有效字段都会过滤,默认全部,对自定义getData方法无效
  208. effectiveFieldsAlias: {}, //有效字段的别名对象,用于 header 的显示
  209. searchFields: [], //有效搜索字段,从前端搜索过滤数据时使用。effectiveFields 配置字段也会用于搜索过滤
  210. showHeader: false, //是否显示选择列表的 header,默认有效字段大于一列时显示,否则不显示
  211. showBtn: true, //是否显示下拉按钮
  212. allowNoKeyword: true, //是否允许无关键字时请求数据
  213. multiWord: false, //以分隔符号分割的多关键字支持
  214. separator: ",", //多关键字支持时的分隔符,默认为半角逗号
  215. processData: processData, //格式化数据的方法,返回数据格式参考 data 参数
  216. getData: getData, //获取数据的方法
  217. autoMinWidth: false, //是否自动最小宽度,设为 false 则最小宽度不小于输入框宽度
  218. listAlign: "left", //提示列表对齐位置,left/right/auto
  219. inputWarnColor: "rgba(255,0,0,.1)", //输入框内容不是下拉列表选择时的警告色
  220. listStyle: {
  221. "padding-top":0, "max-height": "375px", "max-width": "800px",
  222. "overflow": "auto", "width": "auto",
  223. "transition": "0.5s", "-webkit-transition": "0.5s", "-moz-transition": "0.5s", "-o-transition": "0.5s"
  224. }, //列表的样式控制
  225. listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠标悬浮的样式
  226. listHoverCSS: "jhover", //提示框列表鼠标悬浮的样式名称
  227. keyLeft: 37, //向左方向键
  228. keyUp: 38, //向上方向键
  229. keyRight: 39, //向右方向键
  230. keyDown: 40, //向下方向键
  231. keyEnter: 13 //回车键
  232. }</pre>
  233. <h2>使用示例</h2>
  234. <p>请参考 index.html 文件源代码,提供了自定义数据、URL 请求数据、百度搜索API、淘宝搜索API的接口演示。</p>
  235. <h2>二次开发</h2>
  236. <ol>
  237. <li><code>npm install grunt-cli -g</code>
  238. </li>
  239. <li><code>npm install</code>
  240. </li>
  241. <li><code>grunt watch</code>
  242. </li>
  243. </ol>
  244. <h2><a id="user-content-note-on-patches--pull-requests" class="anchor" href="#note-on-patches--pull-requests" aria-hidden="true"><span class="octicon octicon-link"></span></a>Note on Patches / Pull Requests</h2>
  245. <ul>
  246. <li>Fork the project.</li>
  247. <li>Make your feature addition or bug fix.</li>
  248. <li>Send me a pull request. Bonus points for topic branches.</li>
  249. </ul>
  250. <h2><a id="user-content-设计制作" class="anchor" href="#设计制作" aria-hidden="true"><span class="octicon octicon-link"></span></a>设计制作</h2>
  251. <p>该插件由<a href="http://lzw.me" target="_blank">志文工作室</a>开发和维护.</p>
  252. </article>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <!-- 全局js -->
  259. <script src="js/jquery.min.js?v=2.1.4"></script>
  260. <script src="js/bootstrap.min.js?v=3.3.7"></script>
  261. <!-- 自定义js -->
  262. <script src="js/content.js?v=1.0.0"></script>
  263. <script src="js/plugins/suggest/bootstrap-suggest.min.js"></script>
  264. <script type="text/javascript">
  265. var testBsSuggest = $("#test").bsSuggest({
  266. url: "js/plugins/suggest/data.json",
  267. /*effectiveFields: ["userName", "shortAccount"],
  268. searchFields: [ "shortAccount"],
  269. effectiveFieldsAlias:{userName: "姓名"},*/
  270. idField: "userId",
  271. keyField: "userName"
  272. }).on('onDataRequestSuccess', function (e, result) {
  273. console.log('onDataRequestSuccess: ', result);
  274. }).on('onSetSelectValue', function (e, keyword) {
  275. console.log('onSetSelectValue: ', keyword);
  276. }).on('onUnsetSelectValue', function (e) {
  277. console.log("onUnsetSelectValue");
  278. });
  279. /**
  280. * 不显示下拉按钮
  281. */
  282. var testBsSuggest = $("#testNoBtn").bsSuggest({
  283. //url: "/rest/sys/getuserlist?keyword=",
  284. url: "js/plugins/suggest/data.json",
  285. /*effectiveFields: ["userName", "shortAccount"],
  286. searchFields: [ "shortAccount"],
  287. effectiveFieldsAlias:{userName: "姓名"},*/
  288. showBtn: false,
  289. idField: "userId",
  290. keyField: "userName"
  291. }).on('onDataRequestSuccess', function (e, result) {
  292. console.log('onDataRequestSuccess: ', result);
  293. }).on('onSetSelectValue', function (e, keyword) {
  294. console.log('onSetSelectValue: ', keyword);
  295. }).on('onUnsetSelectValue', function (e) {
  296. console.log("onUnsetSelectValue");
  297. });
  298. //data 数据中获取
  299. var testdataBsSuggest = $("#test_data").bsSuggest({
  300. indexId: 2, //data.value 的第几个数据,作为input输入框的内容
  301. indexKey: 1, //data.value 的第几个数据,作为input输入框的内容
  302. data: {
  303. 'value': [
  304. {
  305. 'id': '0',
  306. 'word': 'lzw',
  307. 'description': 'http://lzw.me'
  308. },
  309. {
  310. 'id': '1',
  311. 'word': 'lzwme',
  312. 'description': 'http://w.lzw.me'
  313. },
  314. {
  315. 'id': '2',
  316. 'word': 'meizu',
  317. 'description': 'http://www.meizu.com'
  318. },
  319. {
  320. 'id': '3',
  321. 'word': 'flyme',
  322. 'description': 'http://flyme.meizu.com'
  323. }
  324. ],
  325. 'defaults': 'http://lzw.me'
  326. }
  327. });
  328. //百度搜索测试
  329. var baiduBsSuggest = $("#baidu").bsSuggest({
  330. allowNoKeyword: false, //是否允许无关键字时请求数据
  331. multiWord: true, //以分隔符号分割的多关键字支持
  332. separator: ",", //多关键字支持时的分隔符,默认为空格
  333. getDataMethod: "url", //获取数据的方式,总是从 URL 获取
  334. url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
  335. /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/
  336. jsonp: 'cb',
  337. /*如果从 url 获取数据,并且需要跨域,则该参数必须设置*/
  338. processData: function (json) { // url 获取数据时,对数据的处理,作为 getData 的回调函数
  339. var i, len, data = {
  340. value: []
  341. };
  342. if (!json || !json.s || json.s.length === 0) {
  343. return false;
  344. }
  345. console.log(json);
  346. len = json.s.length;
  347. jsonStr = "{'value':[";
  348. for (i = 0; i < len; i++) {
  349. data.value.push({
  350. word: json.s[i]
  351. });
  352. }
  353. data.defaults = 'baidu';
  354. //字符串转化为 js 对象
  355. return data;
  356. }
  357. });
  358. //淘宝搜索建议测试
  359. var taobaoBsSuggest = $("#taobao").bsSuggest({
  360. indexId: 2, //data.value 的第几个数据,作为input输入框的内容
  361. indexKey: 1, //data.value 的第几个数据,作为input输入框的内容
  362. allowNoKeyword: false, //是否允许无关键字时请求数据
  363. multiWord: true, //以分隔符号分割的多关键字支持
  364. separator: ",", //多关键字支持时的分隔符,默认为空格
  365. getDataMethod: "url", //获取数据的方式,总是从 URL 获取
  366. effectiveFieldsAlias: {
  367. Id: "序号",
  368. Keyword: "关键字",
  369. Count: "数量"
  370. },
  371. showHeader: true,
  372. url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
  373. /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/
  374. jsonp: 'callback',
  375. /*如果从 url 获取数据,并且需要跨域,则该参数必须设置*/
  376. processData: function (json) { // url 获取数据时,对数据的处理,作为 getData 的回调函数
  377. var i, len, data = {
  378. value: []
  379. };
  380. if (!json || !json.result || json.result.length == 0) {
  381. return false;
  382. }
  383. console.log(json);
  384. len = json.result.length;
  385. for (i = 0; i < len; i++) {
  386. data.value.push({
  387. "Id": (i + 1),
  388. "Keyword": json.result[i][0],
  389. "Count": json.result[i][1]
  390. });
  391. }
  392. console.log(data);
  393. return data;
  394. }
  395. });
  396. $("form").submit(function (e) {
  397. return false;
  398. });
  399. </script>
  400. </body>
  401. </html>