Bootstrap Search Suggest使用例子

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插件使用教程

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

时间: 2016-12-19

BootStrap中关于Select下拉框选择触发事件及扩展

Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

bootstrap suggest搜索建议插件使用详解

近日因工作需要看了下此插件. 首先下载bootstrap js包.添加此插件的引用.注意css样式要引用,不能忘记. 前台页面代码,因为楼主做的是选项卡切换查询不同的结果. <tr> <th style="background: #fff;" width="30%">类型:</th> <td width="70%"> <select class="selectpicker show-

JS控件bootstrap suggest plugin使用方法详解

本文为大家分享了bootstrap-suggest-plugin插件,这是一个简单的编辑提示控件,供大家参考,具体内容如下 bootstrap-suggest-plugin插件地址 页面如下面所示,使用此控件 <div class="form-group"> <label class="col-xs-3 text-right control-label">库管员:</label> <div class="col-x

Bootstrap select多选下拉框实现代码

前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cl

bootstrap suggest下拉框使用详解

bootStrap suggest js下拉框的使用,供大家参考,具体内容如下 HTML <div class="modalTop" id="suit_name_div"> <p>选择商品:</p> <%@ include file="dataJs/item/itemSuggest.jsp" %> </div> itemSuggest.jsp <%@ page language=&

Bootstrap select实现下拉框多选效果

在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-

Bootstrap框架下下拉框select搜索功能

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: <script type="text/javascript" src="<%=basePath%>/js/commons/jquery

BootStrap下拉框在firefox浏览器界面不友好的解决方案

http://output.jsbin.com/titaki 以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式很不友好 上谷歌查了一下 1.小容器可以利用select:padding:0 2.下拉图标可以利用background-image:-moz-appearance:none把下拉框的样式去掉,然后 @-moz-document url-prefix() { select.form-control { -moz-appearance: none; appear

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

Bootstrap模块dropdown实现下拉框响应

本文介绍了Bootstrap下拉框模块dropdown的使用方法,供大家参考,具体内容如下 一.源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 二.功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原理: 1.利用dropdown类作为定位点,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle="dropdown"才能做关联. 2. 需要

bootstrap实现多个下拉框同时搜索的实例

1.第一个下拉框代码 <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> <!--快速查询--> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-search">

bootstrap里bootstrap动态加载下拉框的实例讲解

实例如下所示: //引入的包 <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="t

bootstrap动态调用select下拉框的实例代码

html代码: <label for="classify" class="col-sm-2 control-label">填报部门:</label> <div class="col-sm-3"> <select class="selectpicker form-control" data-live-search="true" name="addid&quo

基于bootstrap实现多个下拉框同时搜索功能

本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下 1.第一个下拉框代码 <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> <!--快速查询--> <div class="input-group"> <span class="input-group-addon&qu

Bootstrap组合上、下拉框简单实现代码

本文实例为大家分享了Bootstrap组合上下拉框的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-widt

基于Bootstrap下拉框插件bootstrap-select使用方法详解

写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就是给一个它定义好的样式,就会给你展现出一个好看的组件出来,这个比liger-ui的界面做的要好,但是了解了Boostrap的基本语法后,发现在官方的文档中,并没有一些可以动态加载组件的demo,因为之前用的liger-ui,大多数组件都只需要写一行代码,就能很好的,并且很方便的直接与后台进行交互,并

bootstrap如何让dropdown menu按钮式下拉框长度一致

bootstrap框架提供了下拉菜单组件(dropdown),即点击一个元素或按钮,触发隐藏的列表显示出来. 1.基本代码和页面展示 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能有效.对于菜单部分,设置 class="dropdown-menu"才能 自动隐藏并添加固定样式.设置 class="caret"表示箭头,可上可下. <div class=&qu