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

原创 2013年12月05日 09:23:31

一个很简单的实例

需要引入以下包:



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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

关于autocomplete的小例子

jquery中的autocomplete插件很好用 现在我要做一个这样效果的一个例子,如图: 首先下载jquery.autocomplete.js插件 在jsp中引入 autocomp...

jquery通过struts2请求,返回json数据,在jsp页面形成二级联动下拉列表

本文是要做一个二级联动,动态的。通过jquery返回json类型的数据,然后在jsp页面处理,生成第二级下拉列表菜单。 所需js库: jquery.js,json2.js jar包:json-...

使用servlet,jdbc将mysql中数据显示在jsp页面中,且实现直接删除数据库数据

使用servlet,jdbc将mysql中数据显示在jsp页面中: 效果如下:         //包bean.Student package bean; public class Student ...

JSP页面使用JSON和ajax实现省市联动

jsp页面: Insert title here $(function() { $.getJSON("ProvinceSer", { pid : $("#province")....

Java读取数据库Blob对象返回到JSP页面和getOutputStream() has already been called for this response异常处理

Insert title here <% //CallableStatement cs

在jsp页面中实现图片在数据库中的读取

这里简单的介绍一下jsp页面中从数据库读取图片的三种方式:jsp/servlet/action.第一种方式:jsp+jdbc首先来看看读取图片的jsp处理页面: <% ...

jsp页面调用时间:让2008-10-6 20:36:42 变成 2008-10-6 ——从数据库调用时只显示日期

今天在在做项目时发现页面上从数据库中调用日期时,时间也一起显示出来了,比如说我只想要显示日期2008-10-6,但通过语句调用出来时显示是2008-10-6 20:36:42 。    ...

如何在JSP页面显示mysql数据库内容 (二)

用Eclipse tomcat新建一个JSP页面(一)介绍了如何创建一个web程序和第一个jsp页面,以及Eclipse需要的一些必要配置。今天,我们重点说一下如何从数据库中查询数据,并且在JSP页面...

Struts2+Hibernate3将图片保存于mysql数据库并将其显示在JSP页面

这两天研究了一下图片存储在mysql数据库中,并显示在jsp页面上。      我创建的数据库只有一个表image(id int,image blob);上传文件页面:upImages.jsp<%@ ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)