`
zhaoshijie
  • 浏览: 2243047 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

智能搜索提示功能

 
阅读更多
关键字：智能搜索提示功能
推荐一：http://site518.net/jquery-add-tags-with-tagbox-plugin/
推荐二：https://github.com/aehlke/tag-it/

jquery2012年最新各种插件推荐：http://kouriba.iteye.com/blog/1628769



以下直接pass掉，不用了
附件是完整的例子，希望对大家有所帮助，谢谢

说明：推荐下载：autocomplete（2013.11.28）.rar



其他推荐：推荐jqeury.autocomplete，(jqeury.ui.autocomplete依赖比较多所以不用)

参数介绍：
a:http://bcyy.iteye.com/blog/1809135
b:http://chenling1018.blog.163.com/blog/static/148025420101250354380

例子：http://zld406504302.iteye.com/blog/1900654

2：http://iwebcode.iteye.com/blog/1791740
3：http://shihuan830619.iteye.com/blog/1629637
4：http://dada-fangfang.iteye.com/blog/695464
5:http://zld406504302.iteye.com/blog/1900654
6:




下面是完整的例子：


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

<link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/css/jquery.autocomplete.css"/>

<script src="${pageContext.request.contextPath}/js/jquery-1.3.2.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.autocomplete.js"></script>
<script type="text/javascript">

function test2(){
//http://localhost:8080/shoppingCenter/shoppingCenter/shoppingCenter/gGoods_test.action
alert($("#test").val());
}

$().ready(function() {
var emails9 = [{ name: "赵士杰Peter Pan", to: "peter@pan.de" },{ name: "Molly", to: "molly@yahoo.com" },{ name: "Forneria Marconi", to: "live@japan.jp" },{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },{ name: "Don Corleone", to: "don@vegas.com" },{ name: "Mc Chick", to: "info@donalds.org" },{ name: "Donnie Darko", to: "dd@timeshift.info" },{ name: "Quake The Net", to: "webmaster@quakenet.org" },{ name: "Dr. Write", to: "write@writable.com" }];;;;

var data = "哈哈哈 Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities 赵士杰".split(" "); 

/*
1、后台默认获取参数名称：q，即可获取用户输入字符串
2、url:http://localhost:8080/shoppingCenter/shoppingCenter/shoppingCenter/gGoods_test.action
*/
$("#test2").autocomplete("http://localhost:8080/shoppingCenter/shoppingCenter/shoppingCenter/gGoods_test.action", {
    dataType:"json",
    minChars: 0,//在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
    max: 16,//下拉框最多显示数目
    width: 390,//下拉框宽度
    //matchContains: false,//决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
    //autoFill: false,// 要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
    multiple:true,//是否允许多选
    mustMatch: false,// 作用效果就是自动清空不匹配的输入
multipleSeparator:",",//多选时分割符号
//scrollHeight:220,//自动完成提示的卷轴高度用像素大小表示 Default: 180
//cacheLength:10,//缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
//matchSubset:true,// autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
//scroll:true,// 当结果集大于默认高度时是否使用卷轴(滚动条)显示 Default: true
extraParams: {//这里是自定义提交给action参数（queryStr名称可以自定义）
        queryStr: function() { return $("#tttt").val(); }   
    },
    //加入对action返回的json对象进行解析函数，函数返回一个数组
parse:function(data){
var rows = []; 
     for(var i=0; i<data.length; i++){ 
      rows[rows.length] = {
      //显示在下拉框列表的值
        data:data[i].name + "-" + data[i].to,  
        value:data[i].to,
        //最终选择后放到input框里的值
        result:data[i].to
        };  
      } 
     return rows;
     },
    //最终显示在下来列表中的每一条数据(row是parse函数返回的rows中的data属性)
    formatItem:function(row, i, max) {
   // alert(row);
      return row;
        //return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
    },
    formatMatch:function(row, i, max) {
    //alert(row+"=======================");
        return row.name + " " + row.to;
    },
    formatResult:function(row, i, max) {
     $("#tttt").val(row); 
            return row.to;;
    //alert(row+"-------------------------------");
        //return row;
    },
    //此事件会在用户选中某一项后触发，参数为：
    //event: 事件对象. event.type为result.
    //data: 选中的数据行.
    result:function(event,data){
    alert(event.type);
    }
   

});

//这里每一次用户选择都会触发的函数，可以给隐藏域赋值
$("#test2").result(function(event, data, formatted) { 
   alert(data); alert(event.type); alert(formatted);
   $("#tttt").val(data); 
});

});


</script>
  </head>
 
  <body>
    This is my JSP page. <br>
    <input type="text" size="100" value="" name="test"  id="test2"/>
    <input type="text" size="100" value="" name="tttt"  id="tttt"/>
    <input type="button" onclick="test();" value="test()"/>
   
  </body>
</html>




服务器端代码（struts2的action）：



public String test() throws IOException{
String queryStr = getRequest().getParameter("queryStr");
String id = getRequest().getParameter("id");
String search = getRequest().getParameter("q");
if(search==null||search.length()==0) return null;
List<String> names = new ArrayList<String>();
                   names.add("张三");
                   names.add("李四");
                   names.add("王五");
                  getResponse().setCharacterEncoding("UTF-8");
JSONArray json = JSONArray.fromObject(names);

JSONArray list = new JSONArray();
JSONObject o1 = new JSONObject();
o1.put("name", "张三");
o1.put("to", "张三@126.com");
o1.put("id", "1");

JSONObject o2 = new JSONObject();
o2.put("name", "李四");
o2.put("to", "李四@126.com");
o2.put("id", "2");

JSONObject o3= new JSONObject();
o3.put("name", "王五");
o3.put("to", "王五@126.com");
o3.put("id", "3");

JSONObject o4= new JSONObject();
o4.put("name", "赵士杰");
o4.put("to", "赵士杰@126.com");
o4.put("id", "4");

list.add(o1);
list.add(o2);
list.add(o3);
list.add(o4);
list.add(o4);
PrintWriter out = getResponse().getWriter();
out.print(list);
        out.flush();
        out.close();
        return null;
}




分享到：
| 动态分库分表策略
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics