Bootstrap Search Suggest example, bootstrapsuggest

Bootstrap Search Suggest example, bootstrapsuggest

Official Bootstrap Search Suggest instructions are as follows: suggest instructions
Since this document does not provide detailed instructions on how to apply it to the actual project, especially how to display the values in the database to the page, I encountered many pitfalls when applying it to the project, to better use the plug-in, and to summarize the difficulties encountered, the following is a summary:

I. project framework

1. Background: spring + springmvc + mybatis

2. Foreground: bootstrap + jQuery + ajax

3. Project Management: maven

Ii. Front-end code

1.html code

<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; "> User Name: </label> <input id = "userName" type = "text" style = "height: 22px; "/> <div class =" input-group-btn "> <button type =" button "class =" btn-default dropdown-toggle "data-toggle =" dropdown"> <span class = "caret"> </span> </button> <ul class = "dropdown-menu-right" role = "menu"> </ul> </div> </td> </tr> </table> </div>

2, js Code, mainly has 2 js files, one is autoLoad. js, one is bootstrap-suggest.js, autoLoad. js files are mainly used to configure attributes, bootstrap-suggest.js is the System File

The autoLoad. js code is as follows:

(Function () {$ ("# userName"). bsSuggest ({url: contextUrl + '/user/getuserName? D = '+ new Date (). getTime (), // d = '+ new Date (). getTime () is mainly used to load the input values in a timely manner. You do not need to load the values./* Your tivefields: ["userName", "your account"], searchFields: ["your account"], * // * data: {userName: $ ("# userName "). val ()}, */inclutivefieldsalias: {userName: "category name"}, // valid field alias allowNoKeyword: false, // whether to request data ignorecase if no keyword is allowed: true, // ignore case-sensitive showHeader: false, // display header showBtn: false, // If the drop-down button delayUntilKeyup: true is not displayed, // when the method for obtaining data is firstByUrl, data idField: "userName", keyField: "userName"} is requested only when the input/focus is obtained "}). on ('ondatarequestsuccess ', function (e, result) {console. log ('ondatarequestsuccess: ', result );}). on ('onsetselectvalue', function (e, keyword, data) {console. log ('onsetselectvalue: ', keyword, data );}). on ('onsetselectvalue', function () {console. log ("onUnsetSelectValue ");});}());

Bootstrap-suggest.js, autoLoad. js code, because the code is too much, given, mainly modified 2 places, one is

Var ajaxParam = {type: 'post', dataType: options. jsonp? 'Jsonp': 'json', timeout: 5000, data: {"keyword": keyword} // Add data for post data transfer };

The other is listStyle, which adds location information.

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'    },   

Iii. controller Layer Code

@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;  } } 

4. service Layer and Implementation Layer Code

public interface UserService {  String getUserName(String userName); } 

/*** @ Author Li guangguang (Code The Little Prince) * @ Email 826331692@jd.com * @ date December 19, 2016 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 ;}}}

5. dao-Layer Code

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

Mapper Layer Code

<? 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 "> <! -- Query similar usernames based on the input userName class name --> <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>

Now the entire code is complete. The effect is as follows:

If you want to study in depth, you can click here to learn and attach three special topics:

Bootstrap tutorial

Bootstrap tutorial

Bootstrap Table tutorial

Bootstrap plugin usage tutorial

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.