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 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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 cookis创建实现代码
2009/03/16 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python生成九宫格图片
2018/11/19 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
描述内存分配方式以及它们的区别
2016/10/15 面试题
如何理解transaction事务的概念
2015/05/27 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
小区推广策划方案
2014/06/06 职场文书
食品安全汇报材料
2014/08/18 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
白鹤梁导游词
2015/02/06 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
MySQL慢查询优化解决问题
2022/03/17 MySQL