Bootstrap Search Suggest example, bootstrapsuggest

Source: Internet
Author: User
Tags autoload

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.