最近在做項目時需要用到搜索自動提示，例如姓名查找模糊匹配提示。目前Jquery的自動提示插件非常多，我會例舉幾款，寫出一些與後臺交互的例子
本文介紹一款Jquery autocomplete
官方地址：https://www.devbridge.com/sourcery/components/jquery-autocomplete/
下面直接來實例，不玩虛的，不參與後臺交互的這裏就不做介紹了，本文涉及的後臺開發語言是java,在寫實例之前先看創作人寫的一段文檔
Response Format
Response from the server must be JSON formatted following JavaScript object:
{
// Query is not required as of version 1.2.5
"query": "Unit",
"suggestions": [
{ "value": "United Arab Emirates", "data": "AE" },
{ "value": "United Kingdom", "data": "UK" },
{ "value": "United States", "data": "US" }
]
}
Data can be any value or object. Data object is passed to formatResults function and onSelect callback. Alternatively, if there is no data you can supply just a string array for suggestions:
{
"query": "Unit",
"suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
}
選用第二種根據官方要求的json格式，我們構建一個數據對象。
源碼如下：
public class AutoData {
private String query;
private List<String> suggestions;
public String getQuery() {
return query;
}
public void setQuery(String query) {
this.query = query;
}
public List<String> getSuggestions() {
return suggestions;
}
public void setSuggestions(List<String> suggestions) {
this.suggestions = suggestions;
}
}
控制層是採用spring mvc
關鍵代碼如下
@ResponseBody
@RequestMapping(value="/autoComplete",method = RequestMethod.POST)
public AutoData autoComplete(HttpServletRequest request){
String keyword = request.getParameter("keyword");
List<String> list = this.studentService.getNameByName(keyword);//查詢返回學生姓名
AutoData autoData = new AutoData();
autoData.setQuery("Unit");//"query":"Unit",
autoData.setSuggestions(list);
return autoData;
}
從下載Autocomplete的源碼包中找出jquery.autocomplete.js和styles.css引入頁面
html頁面測試代碼
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--引入Autocomplete官方提供的樣式-->
<link href="autocompleteStyles.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--引入Autocomplete庫-->
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function() {
$('#autocomplete').autocomplete({
serviceUrl : 'autoComplete',//load from server
type:'post',
paramName:'keyword',
onSelect : function(suggestion) {
}
});
$('#sub').on("click",function(){
console.log($("#autocomplete").val());
});
})
</script>
</head>
<body>
<input type="text" id="autocomplete" class="dataInput" placeholder="輸入姓名" />
<input type="submit" value="Submit" id="sub"/>
</body>
</html>
現在整個例子就完成了，瞭解詳細的還是請看源文檔，本例僅供參考