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高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
详解django中使用定时任务的方法
2018/09/27 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
电子商务专业求职信
2014/03/08 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
护理医院见习报告
2014/11/03 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js