autocomplete的使用 从数据库中读取后显示在JSP页面上 JSON jquery

一个很简单的实例

需要引入以下包：

<link rel="Stylesheet" href="css/jquery-ui-1.10.3.custom.css.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>

action代码：

package com.Action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;

import com.Sql.Sql_Query;
import com.opensymphony.xwork2.ActionSupport;

public class SearchAction extends ActionSupport {
	String words;
	List<String> list=new ArrayList<String>();

	private Map<String, Object> dataMap;
	
	public List<String> getList() {
		return list;
	}

	public void setList(List<String> list) {
		this.list = list;
	}

	public Map<String, Object> getDataMap() {
		return dataMap;
	}

	public SearchAction() {
		// 初始化Map对象
		dataMap = new HashMap<String, Object>();
	}

	public String getWords() {
		return words;
	}

	public void setWords(String words) {
		this.words = words;
	}

	public String searchWords() {
		System.out.println(getWords());
		list=Sql_Query.getKeyWordsList(getWords(), 0, 10);
		System.out.println(list.size());
		
		JSONArray json_array = new JSONArray();
		json_array.add(list);
		dataMap.put("jsonArray", json_array);
		dataMap.put("success", true);
		System.out.println(dataMap);
		return SUCCESS;
	}
}

struts.xml中的代码

	<package name="json" extends="json-default">
	    
	    <action name="searchWords" class="com.Action.SearchAction" method="searchWords">
			<result type="json">
				<param name="root">dataMap</param>
			</result>
		</action>
		
	</package>

JSP页面中的代码

<script type="text/javascript">
	$(function() {
		$("#search").keyup(function() {
			var availableTags;
			var keyWords = $("#search").val();
			var content = {
				"words" : keyWords
			};
			$.ajax({
				type : "post",
				url : "searchWords.action",// 路径 
				data : content,
				success : function(data) {
					if (data.success) {
						var temp = data.jsonArray;
						var tempStr = temp.join(",");
						availableTags = tempStr.split(",");
						$("#search").autocomplete({
							source : availableTags
						});
					}
				}
			})
		});
	});
</script>

<input id="search" type="text">

CSS代码修改下拉菜单的背景及hover状态

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #ffffff;
	background: #dddddd url(images/ui-bg_glass_65_dddddd_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: black;
}修改hover

/*autocomplete下拉菜单的背景*/
.ui-widget-content {
	border: 1px solid #EEEEEE;
	background: #EEEEEE url(images/ui-bg_glass_65_eeeeee_1x400.png) 50% top repeat-x;
	color: #333333;
}