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


jQuery自动补全autocomplete插件使用,三种获取数据源方式具体实现(true)

jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式。 主要参数: Sour...
  • qq931399960
  • qq931399960
  • 2015年05月03日 01:46
  • 6091

使用servlet,jdbc将mysql中数据显示在jsp页面中

项目开始前找齐所需要的jar包  我这里只做一个小的示例只需要这两个Jar包 jstl.jar  做页面时需要的c标签库 mysql-connector-java-5.1.18-bin.jar  ...
  • qq_27292113
  • qq_27292113
  • 2016年01月08日 11:22
  • 5306

mongodb基础系列——数据库查询数据返回前台JSP(一)

经过一段时间停顿,终于提笔来重新整理mongodb基础系列博客了。 同时也很抱歉,由于各种原因,没有及时整理出当时期待万分的博友,今天做了一个demo,来演示,mongodb数据库查询的数据在JSP...
  • llhhyy1989
  • llhhyy1989
  • 2013年10月10日 21:25
  • 5388

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

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

jquery与后台进行数据交互--前台发单一数据对象,后台返回一个json字符串 jsp页面

JSP页面
  • d06110902002
  • d06110902002
  • 2015年11月25日 09:42
  • 885

SpringMVC从数据库中读取图片显示到JSP页面上

摸索了一个多星期,终于解决了展示瀑布流照片墙的问题,我一直在思考照片放在哪里,前后想了很多方案。最开始是想把照片放在本地(我的E盘中),而数据库中只存照片的名字,但是这种方案遇到了瓶颈,我不知道img...
  • StarskyBoy
  • StarskyBoy
  • 2016年08月19日 16:33
  • 15140

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

使用servlet,jdbc将mysql中数据显示在jsp页面中: 效果如下:         //包bean.Student package bean; public class Student ...
  • kakukeme
  • kakukeme
  • 2011年08月11日 16:56
  • 21385

servlet读取数据库代码到jsp页面表格示例

  • 2017年12月05日 15:56
  • 952KB
  • 下载

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

jsp页面: Insert title here $(function() { $.getJSON("ProvinceSer", { pid : $("#province")....
  • pyy542718473
  • pyy542718473
  • 2017年04月21日 10:13
  • 651

使用servlet,jdbc将mysql中数据显示在jsp页面中

  • 2016年01月08日 16:44
  • 1.09MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:autocomplete的使用 从数据库中读取后显示在JSP页面上 JSON jquery
举报原因:
原因补充:

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