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> 

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

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # Search  # Suggest  # JS控件bootstrap suggest plugin使用方法详解  # bootstrap suggest搜索建议插件使用详解  # Bootstrap select多选下拉框实现代码  # Bootstrap select实现下拉框多选效果  # BootStrap中关于Select下拉框选择触发事件及扩展  # BootStrap下拉框在firefox浏览器界面不友好的解决方案  # Bootstrap框架下下拉框select搜索功能  # Bootstrap模块dropdown实现下拉框响应  # 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框  # bootstrap suggest下拉框使用详解  # 文档  # 太多  # 下载地址  # 是怎么  # 点击这里  # 详细说明  # 我再  # 还想  # 项目管理  # 主要用于  # 时才  # 也行  # 时请  # 数据库中  # 大家多多  # 再为  # 是为了  # 完成了  # 加载  # 下午 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  Laravel如何记录自定义日志？（Log频道配置）  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  Laravel怎么实现验证码(Captcha)功能  微信小程序 scroll-view组件实现列表页实例代码  海南网站制作公司有哪些,海口网是哪家的？  Laravel怎么调用外部API_Laravel Http Client客户端使用  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  北京网站制作公司哪家好一点,北京租房网站有哪些？  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  怎么用AI帮你为初创公司进行市场定位分析？  智能起名网站制作软件有哪些,制作logo的软件？  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  打造顶配客厅影院，这份100寸电视推荐名单请查收  如何快速搭建自助建站会员专属系统？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何在万网开始建站？分步指南解析  Python制作简易注册登录系统  Python面向对象测试方法_mock解析【教程】  网站制作报价单模板图片,小松挖机官方网站报价？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  高端网站建设与定制开发一站式解决方案 中企动力  如何在景安服务器上快速搭建个人网站？  如何用PHP工具快速搭建高效网站？  如何在云主机快速搭建网站站点？  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  个人摄影网站制作流程,摄影爱好者都去什么网站？  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  网站图片在线制作软件,怎么在图片上做链接？  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  C++时间戳转换成日期时间的步骤和示例代码  Java类加载基本过程详细介绍  Laravel如何自定义错误页面（404, 500）？（代码示例）  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  历史网站制作软件,华为如何找回被删除的网站？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Android GridView 滑动条设置一直显示状态(推荐)  如何在橙子建站上传落地页？操作指南详解  如何在云指建站中生成FTP站点？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  个人网站制作流程图片大全,个人网站如何注销？  如何快速搭建安全的FTP站点？  如何将凡科建站内容保存为本地文件？  Laravel如何优化应用性能？（缓存和优化命令）  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？