Bootstrap Search suggest use examples _javascript tips

Bootstrap Search suggest official description documentation is as follows: suggest documentation
Because the document does not specify how to apply to the actual project, especially how to display the value of the database on the page, so I applied to the project, encountered a lot of pits, in order to better use the plug-in, but also for their own summary of the pits encountered, the special summary as follows

I. Framework of the Project

1. Backstage: Spring+springmvc+mybatis

2. Front Desk: Bootstrap+jquery+ajax

3. Project management: Maven

Second, the foreground code

1.html Code

 <div class=" content nav-version "> <table class=" detail "style=" Margin-botto m:12px; " > <tr><td class= "First-col" > <div class= "Row" > <div class= "col-lg-12" > <div clas s= "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= -btn "> <button type=" button "class=" btn btn-default dropdown-toggle "data-toggle=" dropdown "> <span CLA ss= "Caret" ></span> </button> <ul class= "Dropdown-menu dropdown-menu-right" role= "menu" ></u l> </div> </div> </div> </div> </td></tr> </table> </div > 

2,js code, there are mainly 2 JS files, one is Autoload.js, one is Bootstrap-suggest.js,autoload.js file is mainly used for configuration properties, Bootstrap-suggest.js is System files

The Autoload.js code is as follows:

Bootstrap-suggest.js,autoload.js code, because too much code, give the download address, mainly modified 2 places, one is

var Ajaxparam = { 
  type: ' POST ', 
  dataType:options.jsonp? ' Jsonp ': ' json ', 
  timeout:5000, 
  data:{' keyword ': keyword}//add data for post delivery 
  

The other is, ListStyle, adding 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 ' 
  
 },   

Three, controller layer code

@Controller 
@RequestMapping ("/user") public 
class Usercontroller { 
 
 @Autowired 
 private UserService UserService; 
 
 @RequestMapping (value= "/getusername", method = Requestmethod.post) 
 @ResponseBody the public 
 String GetUserName ( HttpServletRequest request,httpservletresponse response) { 
 String userName = request.getparameter ("keyword"); 
 String usernamelist = Userservice.getusername (userName); 
 Return usernamelist 
 } 
} 

Iv. service layer and implementation layer code

Public interface UserService { 
 string GetUserName (string userName); 

/** 
 * @author Li Guangguang (Code little Prince) 
 * @Email 826331692@jd.com 
 * @date December 19, 2016 afternoon 4:18:45 
 * @version 1.0 
 */< c6/> @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; 
  } 
 } 
 
 

Five, DAO layer code

Public interface Userdao { 
 
 list<string> getusername (@Param ("UserName") String userName); 
 

Six 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 for similar username--> 
 <select id=" GetUserName "resulttype=" String " 
 based on the username class name entered Select distinct userName from 
 user_table 
 where yn=1 <if test= "userName!= null and UserName!=" 
  ">a nd userName like concat (#{username}, '% ') </if> 
 limit 0,10 
 </select> 
 
</mapper> 

So the whole code is complete and the effect is as follows

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.