`
tiwson
  • 浏览: 333024 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jQuery + ajax仿google下拉列表提示功能

阅读更多
根据客户的需求,在某些输入框要实现类似Google的autocomplete。JQuery早就给我们提供了现成的实现。并且应用很简单。只要最后展示的样式,可以通过调整Css来实现。

1. 创建一个html并 引入jQuery.js  query.autocomplete.js 和 query.autocomplete.css
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    
  "http://www.w3.org/TR/html4/loose.dtd">   
   <html>   
    <head>   
      <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />   
       <script src="jquery.js"></script>   
    <script src="jquery.autocomplete.js"></script>   
    <style>   
         input {    
             font-size: 120%;    
        }    
    </style>   
</head>   
 <body>   
   <h3>Country</h3>   
     <input type="text" id="pid" name="pid"/>   
   
.     <script>   
        $("#pid").autocomplete("getdata.jsp",{
						             delay:10,
						            minChars:1,
						            matchSubset:1,
						            matchContains:1,
						            cacheLength:10,
						            matchContains: true,   
						            scrollHeight: 250, 
						            width:250,
						            autoFill:false
						        });
     </script>   
 </body>   
 </html>      



2. 创建 getdata.jsp 获取数据

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<%@page import="java.util.List"%>
<%@page import="com.lccert.crm.quotation.Quotation"%>
<%@page import="com.lccert.crm.quotation.QuotationAction"%>

<%
	String key = new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8");
	List<Quotation> lists = QuotationAction.getInstance().searchQuotation(key,"part");
	for(int i=0;i<lists.size();i++) {
		Quotation quotation = lists.get(i);
		out.println(quotation.getPid());
	}
%>



3、注意后台JSP页面:jQuery通过ajax传递的参数名是“q”,如果需要传递中文,只需要
String key = new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8");

分享到:
评论

相关推荐

    php+ajax仿百度谷歌搜索下拉效果

    3. **jQuery**:虽然描述中没有明确提到,但在实际的Web开发中,尤其是与AJAX交互时,jQuery库通常被用来简化JavaScript代码,因为它提供了丰富的API来处理DOM操作和AJAX请求。 4. **前端界面**:为了实现下拉效果...

    用php+ajax写的仿百度谷歌搜索下拉自动提示框效果

    这个项目“用php+ajax写的仿百度谷歌搜索下拉自动提示框效果”旨在实现类似百度和谷歌搜索引擎的实时搜索建议功能。下面我们将详细探讨这个过程涉及的关键知识点。 首先,我们要理解**PHP**(Hypertext ...

    phpsearch用php+ajax仿百度谷歌搜索下拉效果.zip

    本项目"phpsearch用php+ajax仿百度谷歌搜索下拉效果"旨在模仿这两个巨头的搜索框下拉建议功能,它能根据用户输入的关键词实时提供相关的搜索建议,大大提升了搜索效率。下面我们将详细探讨这个项目涉及到的技术和...

    php+ajax实现仿百度查询下拉内容功能示例

    百度查询功能是一种常见的Web搜索框自动补全或查询提示功能,通过该功能,当用户在搜索框中输入查询时,系统能够动态地返回与查询相关的下拉列表供用户选择,从而提供更好的用户体验。 首先,需要了解HTML页面的...

    仿百度 谷歌下拉提示 纯jquery 实现

    标题中的“仿百度 谷歌下拉提示 纯jquery 实现”指的是利用JavaScript库jQuery来创建一种功能,该功能模拟了百度和谷歌搜索引擎在用户输入时显示下拉建议的效果。这种效果能够提高用户体验,因为用户无需完整输入...

    jquery+flex+自动补全

    "jQuery + Flex + 自动补全"是一种高效的技术组合,它为用户提供了一个智能的输入体验,使得在输入框中输入内容时能够得到即时的、相关性的建议,类似于Google的搜索功能。这种功能在诸如搜索引擎、电子商务网站、...

    ajax 仿google下垃菜单提示框

    **Ajax 仿Google下拉菜单提示框** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它极大地提升了用户体验,使得网页交互更加流畅。在这个项目中,我们讨论的...

    用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)

    在本文中,我们将深入探讨如何使用jQuery库进行AJAX(异步JavaScript和XML)开发,通过实际案例来学习包括级联菜单、谷歌式搜索提示和可编辑表格在内的常见功能。这些功能都允许用户在不刷新整个页面的情况下与网页...

    级联下拉列表例子(ajax和jquery)&prototype1;.7&jquery;_jar

    在级联下拉列表的实现中,jQuery可以用来绑定事件监听器,当用户在第一个下拉列表中做出选择时触发AJAX请求,同时它还用于更新第二个下拉列表的HTML内容。 在提供的"prototype.1.7.js"文件中,Prototype是一个...

    asp+ajax实现google输入框的效果

    本知识点将深入探讨如何使用Asp.NET和Ajax技术来模仿Google输入框的实时搜索功能,提升用户体验。 首先,我们要理解Asp.NET的核心是微软的.NET Framework,它为开发Web应用程序提供了强大的支持。Asp.NET提供了多种...

    仿照百度,google的输入框提示下拉列表

    标题中的“仿照百度,google的输入框提示下拉列表”指的是实现类似百度和Google搜索引擎在用户输入关键词时,自动下拉显示出与输入内容相关的搜索建议功能。这种功能在网页开发中常见,能够提高用户体验,让用户快速...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....

    仿google下拉菜单

    在.NET C#开发环境中,创建一个仿Google下拉菜单的功能主要涉及到前端的HTML、CSS以及JavaScript,后端可能涉及到AJAX交互,以实现动态加载和数据交换。下面将详细讲解这个过程中的关键技术点。 首先,我们需要理解...

    ajax实现google下拉搜索

    **Ajax实现Google下拉搜索详解** 在Web开发中,实现类似Google的实时下拉搜索功能是一种常见的需求,它能够提供用户友好的交互体验,提高搜索效率。本篇将详细介绍如何利用Ajax技术,结合VS2008开发环境和Oracle...

    ajax仿google搜索

    在本篇中,我们将深入探讨如何使用Ajax和ASP.NET来构建一个仿Google搜索的功能。 ### 1. Ajax基础 Ajax的核心是通过JavaScript在后台与服务器进行异步通信,实现了用户界面的局部刷新。它包括了XMLHttpRequest对象...

    仿google搜索下拉层框ajax+json+php 实现

    在IT行业中,实现类似Google搜索下拉层框的功能是一项常见的需求,它能够提供用户友好的交互体验,提高搜索效率。这个功能通常结合了Ajax、JSON和PHP等技术,以实现动态加载和数据交换。下面我们将深入探讨这些技术...

    一个基于C#+Ajax实现的类似Google搜索的ComboBox 控件源码例子

    ComboBox控件是用户界面中常见的一种组件,它结合了下拉列表和文本输入框的功能,允许用户在输入文字的同时,从预定义的选项中进行筛选和选择,类似于Google搜索的实时建议功能。 首先,让我们详细了解一下C#(C ...

    jQuery mobile带历史记录的仿谷歌搜索

    这些建议可以通过`$.getJSON()`或`$.ajax()`方法获取,并动态更新到页面上的下拉列表或列表项中。 接下来,我们要实现搜索历史记录。jQuery Mobile有一个内置的历史管理机制,它会跟踪用户在应用中的导航路径。每次...

    仿google下拉 php版、asp版

    在仿Google下拉搜索框中,Ajax负责监听用户在输入框中输入的字符,并实时发送请求到服务器获取匹配的建议。 2. **PHP**:PHP是一种广泛使用的开源脚本语言,特别适用于Web开发,可以嵌入HTML中。在这个项目中,PHP...

    仿谷歌搜索可键盘下拉提示

    标题中的“仿谷歌搜索可键盘下拉提示”指的是在网页搜索框中实现类似谷歌搜索引擎的自动补全功能,也就是当用户在输入关键字时,搜索框会根据已输入的部分文字给出可能的搜索建议,以帮助用户快速找到他们可能感兴趣...

Global site tag (gtag.js) - Google Analytics