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