`
zhaoshijie
  • 浏览: 2262748 次
  • 性别: 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;
}




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

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

相关推荐

    c#智能提示功能实现自动搜索

    在C#编程中，智能提示功能是提升用户体验和开发效率的重要工具。本项目实现了自动搜索功能，特别是支持汉字和拼音输入的智能匹配。这一功能主要借助了AjaxControlToolkit中的AutoCompleteExtender控件，它是一种基于...

    像百度智能提示一样的智能搜索提示

    本篇将详细探讨"像百度智能提示一样的智能搜索提示"这一主题，包括其工作原理、实现方式以及在实际应用中的价值。 首先，智能提示的核心功能是根据用户输入的关键词，实时提供相关的建议，帮助用户快速找到他们可能...

    Google 智能提示搜索

    在这个场景下，`后台执行的Action.java代码（基于Struts）.txt`文件应该包含了处理搜索提示请求的类。这个类会接收来自前端的输入，可能是一个部分完成的搜索词，然后根据这个输入去执行相应的搜索建议算法。这个...

    Asp.Net+Ajax控键实现搜索输入框智能提示功能源码

    在Asp.Net开发中，利用Ajax技术可以极大地提升用户体验，特别是在实现搜索输入框的智能提示功能时，Ajax的优势尤为明显。这个"WebSite2"压缩包文件提供的源码就是一个很好的例子，展示了如何将Asp.Net与Ajax控件结合...

    C++模仿GOOGLE等搜索引擎的智能提示功能(源码)

    在IT行业中，搜索引擎的智能提示功能是用户交互体验的重要组成部分，它极大地提高了用户搜索效率。谷歌等搜索引擎在这方面做得尤为出色，而本项目则尝试用C++语言模仿这种功能。这个项目名为"C++模仿GOOGLE等搜索...

    JSP ajax智能搜索关键字提示

    使用 JSp+Servlet做的一个智能搜索提示。原来是也是在CSDN下载的，可是后我加入了支持中文搜索功能，以及提示的时候DIV浮动功能，以及点击空白处取消功能。 和百度的搜索提示基本一模一样，可以直接应用于项目中。

    jquery智能搜索提示框

    总结来说，这个项目展示了如何结合jQuery和后端服务实现一个实时的、交互式的搜索提示功能，这在现代Web应用中是非常常见且重要的一个特性。开发过程中，不仅需要理解jQuery的事件处理和AJAX通信，还需要掌握SQL查询...

    Ajax+servlet实现搜索框智能提示

    在现代Web应用中，用户界面的交互性和实时性变得至...这个例子中的搜索框智能提示功能，不仅展示了Ajax的实时性，也突显了Servlet在后端处理中的作用。理解并掌握这些技术，对于开发高效、用户友好的Web应用至关重要。

    JSP下智能搜索提示源码

    在这个名为"JSP下智能搜索提示源码"的项目中，我们看到的是一个利用Java和JSP技术实现的搜索引擎智能提示功能，其灵感来源于百度的搜索框自动补全。这个功能通常用于提高用户输入搜索词的效率，通过实时获取并显示与...

    仿百度搜索的jquery自动完成功能包

    "仿百度搜索的jQuery自动完成功能包"正是为了解决这个问题而设计的，它允许开发者轻松地在网页文本框中实现智能搜索提示功能，即用户在输入关键字时，系统会根据已有的数据提供相关的建议，类似百度搜索引擎的搜索...

    TextBox和ComoBox智能提示功能源代码（类似Google首页的搜索框）

    在本项目中，"TextBox和ComboBox智能提示功能源代码"是实现了一个类似于Google首页搜索框的智能提示效果。 TextBox通常是单行文本输入框，用户可以在此输入文本。在实现智能提示时，当用户在TextBox中输入字符时，...

    智能搜索－根据用户输入智能提示

    在这个项目“智能搜索－根据用户输入智能提示”中，我们关注的核心是利用原生JavaScript实现这一功能，并通过函数节流优化搜索性能。 一、智能搜索实现原理 1. 关键词匹配：智能搜索的关键在于如何根据用户输入的...

    JSP+Ajax+Servlet 自动完成类似谷歌百度搜索

    这通常涉及使用JavaScript和CSS来实现动态效果，比如下拉列表展示搜索建议，以及输入框的样式和反馈提示等。 6. **JSON数据交换格式**: Ajax与Servlet之间的通信通常使用JSON（JavaScript Object Notation）作为...

    servlet+ajax实现搜索框智能提示

    通过Servlet和Ajax的结合，我们可以构建出一个高效、流畅的搜索框智能提示功能，它不仅提升了用户交互体验，也减轻了服务器的压力，因为只需要处理真正有需求的请求。理解并掌握这个技术，对于开发高质量的Web应用至...

    搜索提示Ajax+js智能提示【亲测】【原创】

    在IT领域，Ajax（Asynchronous JavaScript and XML）与JavaScript技术结合使用可以实现高效的网页交互，尤其是在构建搜索提示功能时，这种技术的应用尤为常见。本文将深入探讨如何利用Ajax和JavaScript来创建一个...

    调用百度搜索，实现智能提示

    在IT行业中，调用外部服务以增强应用功能是一种常见的实践，尤其在开发智能搜索或推荐系统时。本主题聚焦于“调用百度搜索，实现智能提示”，这是一个利用API接口技术来提升用户体验的重要方法。下面我们将深入探讨...

    ajax+mysql仿百度搜索智能提示功能

    本项目“ajax+mysql仿百度搜索智能提示功能”就是利用Ajax技术，结合MySQL数据库，实现了一个类似百度搜索的实时智能提示功能。下面将详细讲解其中涉及的关键知识点。 一、Ajax基础 Ajax的核心是JavaScript异步通信...

    智能提示功能.rar

    智能提示功能，也被称为自动完成或补全，是IT领域中一种常见的用户界面特性，尤其在搜索引擎、文本编辑器和编程环境中广泛应用。这种功能能够极大地提高用户输入效率，减少错误，提升用户体验。在这个名为"智能提示...

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