jquery插件autoSuggestv输入框自动补全 -

アリス

浏览: 7426 次
性别:
来自: 福建

最近访客更多访客>>

flylibin

djz6626

ajfox

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

jquery插件autoSuggestv输入框自动补全

jquery json java

官方地址: click me

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

}

分享到：