Bootstrap Search Suggest使用例子


Posted in Javascript onDecember 21, 2016

Bootstrap Search Suggest 官方说明文档如下:suggest说明文档
由于该文档没有详细说明怎么运用到实际的项目中,特别是怎么将数据库中的值显示到页面上,所以我再运用到项目中,遇到了很多的坑,为了大家更好使用该插件,也为了自己总结下所遇到的坑,特总结如下

一、项目框架

1.后台:spring+springmvc+mybatis

2.前台: bootstrap+jQuery+ajax

3.项目管理:maven

二、前台代码

1.html代码

<div class="content nav-version"> 
 <table class="detail" style="margin-bottom:12px;"> 
 <tr><td class="first-col"> 
 <div class="row"> 
 <div class="col-lg-12"> 
  <div class="input-group" style="width: 100%; height: 17px; display: -webkit-box;"> 
  <label style="margin-left: 13px;">用户名称:</label> 
  <input id="userName" type="text" style="height: 22px;" /> 
  <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> 
 </td></tr> 
 </table> 
</div>

2,js代码,主要有2个js文件,一个是autoLoad.js,一个是bootstrap-suggest.js,autoLoad.js文件主要用于配置属性,bootstrap-suggest.js是系统文件

autoLoad.js代码如下:

(function() { 
 $("#userName").bsSuggest({ 
 url: contextUrl +'/user/getuserName?d='+new Date().getTime(), 
 //d='+new Date().getTime()主要是为了让每次输入的值都及时加载,不用也行 
 /*effectiveFields: ["userName", "shortAccount"], 
 searchFields: [ "shortAccount"],*/ 
/* data: { 
 userName: $("#userName").val() 
 }, */ 
 effectiveFieldsAlias:{userName: "分类名称名称"},//有效字段别名 
 allowNoKeyword: false, // 是否允许无关键字时请求数据 
 ignorecase: true,//忽略大小写 
 showHeader: false,//显示 header 
 showBtn: false, //不显示下拉按钮 
 delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时,延迟到有输入/获取到焦点时才请求数据 
 idField: "userName", 
 keyField: "userName" 
 }).on('onDataRequestSuccess', function (e, result) { 
 console.log('onDataRequestSuccess: ', result); 
 }).on('onSetSelectValue', function (e, keyword, data) { 
 console.log('onSetSelectValue: ', keyword, data); 
 }).on('onUnsetSelectValue', function () { 
 console.log("onUnsetSelectValue"); 
 }); 
}());

bootstrap-suggest.js,autoLoad.js 代码,由于代码太多,给出下载地址,主要修改了2个地方,一个是

var ajaxParam = { 
 type: 'POST', 
 dataType: options.jsonp ? 'jsonp' : 'json', 
 timeout: 5000, 
 data:{"keyword":keyword}//添加data,用于post传递数据 
 };

另一个是,listStyle,添加了位置信息

listStyle: { 
 'position':'relative', 
 'margin-left':'-206px', 
 'margin-top':'26px', 
 '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' 
 
 },

三、controller层代码

@Controller 
@RequestMapping("/user") 
public class UserController { 
 
 @Autowired 
 private UserService userService; 
 
 @RequestMapping(value="/getUserName",method = RequestMethod.POST) 
 @ResponseBody 
 public String getUserName(HttpServletRequest request,HttpServletResponse response){ 
 String userName = request.getParameter("keyword"); 
 String userNameList = userService.getUserName(userName); 
 return userNameList; 
 } 
}

四、service层和实现层代码

public interface UserService { 
 String getUserName(String userName); 
}
/** 
 * @author 李光光(编码小王子) 
 * @Email 826331692@jd.com 
 * @date 2016年12月19日 下午4:18:45 
 * @version 1.0 
 */ 
@Service 
public class UserServiceImpl implements UserService { 
 
 @Autowired 
 private UserDao userDao; 
 
 @Override 
 public String getUserName(String userName) { 
 String json="{\"message\": \"\",\"value\": ["; 
// if(!userName.isEmpty()){ 
 List<String> list = userDao.getUserName(userName); 
 if(list != null && !list.isEmpty()){ 
 for(int i=0;i<list.size;i++){ 
  json+="{"+"\"userName\":"+"\""+list.get(i)+"\"" +"},"; 
 } 
 json = json.substring(0,json.length()-1>0?json.length()-1:1); 
 json+="],\"code\": 200,\"redirect\": \"\"}"; 
 return json; 
 }else{ 
 json+="],\"code\": 400,\"redirect\": \"\"}"; 
 return json; 
 } 
 } 
 
}

五、dao层代码

public interface UserDao { 
 
 List<String> getUserName(@Param("userName")String userName); 
}

六mapper层代码

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > 
<mapper namespace=".....dao.UserDao" > 
 <!--根据输入的用户名类名查询相似的用户名 --> 
 <select id="getUserName" resultType="String"> 
 select distinct userName 
 from user_table 
 where yn=1 
 <if test="userName != null and userName != ''">and userName like concat (#{userName},'%')</if> 
 limit 0,10 
 </select> 
 
</mapper>

至此整个代码就完成了,效果如下

Bootstrap Search Suggest使用例子

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
js select option对象小结
Dec 20 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 #Javascript
详解Vue.js动态绑定class
Dec 20 #Javascript
浅谈Angular的$q, defer, promise
Dec 20 #Javascript
You might like
关于php fread()使用技巧
2010/01/22 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
代码生成器 document.write()
2007/04/15 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python里对list中的整数求平均并排序
2014/09/12 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python生成器表达式和列表解析
2016/03/10 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
悬挂训练绳:TRX
2017/12/14 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
药学专业毕业生求职信
2013/10/20 职场文书
同学会主持词
2014/03/18 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
创业计划书之酒吧
2019/12/02 职场文书