jquery插件autoSuggestv输入框自动补全
程序员文章站
2022-06-01 16:29:12
...
官方地址: [url=http://code.drewwilson.com/entry/autosuggest-jquery-plugin]click me[/url]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>auto</title>
<link rel="stylesheet" href="web/js/plugin/autoSuggestv/autoSuggest.css" type="text/css"></link>
<script type="text/javascript" src="web/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="web/js/plugin/autoSuggestv/jquery.autoSuggest.js"></script>
<script type="text/javascript">
$(function(){
// 本地数据
// var data = {"items":[
// {"value":"value1"},
// {"value":"value2"},
// {"value":"value3"},
// {"value":"value4"},
// {"value":"value5"}
// ]};
// $("#test").autoSuggest(data.items);
// json
$("#test").autoSuggest(window.location.href + "/test.action",
{minChars: 1,//几个字符开始查询
asHtmlID: "iID",//html id 获取值可以通过$("#as-values-iID").val()
startText: "请输入要查询的内容",
emptyText: "查无此项",
selectionLimit: true, //设置为true则只能提交单个查询条件
limitText: "禁止多值查询", //准备输入多个查询时的提示内容
retrieveComplete: function(data){ return data.items; },
//方便返回数据的处理,items为包含pojo的arraylist
});
$("#btn").click(function(){
alert($("#as-values-iID").val());
//单个条件也会包含","服务端注意处理
});
});
</script>
</head>
<body>
<div style="width: 260px" >
<p><input type="text" id="test" style="width: 80px"/></p>
<input type="button" id="btn" value="提 交">
</div>
</body>
</html>
package net.alice.json;
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
/**
* 类描述：AutoSuggest插件支持,action继承该类,方便处理返回数据
* @version: 1.0
* @date: 2014-1-18 下午9:22:32
* **/
@SuppressWarnings("serial")
public class AutoSuggestSupport extends ActionSupport{
private List<AutoSuggest> items = new ArrayList<AutoSuggest>();
public List<AutoSuggest> getItems() {
return items;
}
public void setItems(List<AutoSuggest> items) {
this.items = items;
}
public String execute() throws Exception {
items.add(new AutoSuggest("1", "alice"));
items.add(new AutoSuggest("2", "komoe"));
items.add(new AutoSuggest("3", "nagi"));
items.add(new AutoSuggest("4", "arisu"));
items.add(new AutoSuggest("5", "kobado"));
return SUCCESS;
}
}
package net.alice.json;
public class AutoSuggest {
private String name;
private String value;
public String getName() {
return name;
}
public String getValue() {
return value;
}
public void setName(String name) {
this.name = name;
}
public void setValue(String value) {
this.value = value;
}
public AutoSuggest(String name, String value) {
this.name = name;
this.value = value;
}
}