jquery autocomplete前後臺整合實例(2)

本文要介紹的jquery autocomplete是jquery ui的。需要的庫從jquery ui官網下載

後臺只要返回一個json格式的字符串數組

           注：採用spring mvc

@ResponseBody
@RequestMapping(value="/autoComplete",method = RequestMethod.POST)
public  List<String> autoComplete(HttpServletRequest request){
String keyword = request.getParameter("keyword");
List<String> list = this.studentService.getNameByName(keyword);//從數據庫查詢出姓名
return list;
}

       頁面關鍵代碼

     <!--引入jquery ui的樣式-->

      <link rel="stylesheet" href="../css/jquery-ui.css" />

     <!--引入jquery ui庫-->

      <script type="text/javascript" src="../js/jquery-ui.js"></script>

     <input type="text" name="keyword" id="keyword" value=""
class="inp_srh"  placeholder="搜索姓名"/>

 插件調用

   $("#keyword").autocomplete({
minLength : 1,
autoFocus : true,
source : function(request, response) {
$.ajax({
type : "POST",
url : "autoComplete",//從後臺獲取數據
dataType : "json",
data : {
keyword : $("#keyword").val()
},
success : function(json) {
response($.map(json, function(item) {
return {
label : item,
value : item
};
}));
}
});
}
}); //

通過上面幾個片段代碼，實際基本完成了自動提示

它有很多的配置，瞭解更多配置看官方文檔