欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
}

}

相关标签: jquery json java