有时候觉得百度那个输入内容就有提示的工具很神奇，它究竟是怎么做到的呢？以前在一个进销存系统中也做过这么个功能，但是远远不及百度的功能强大，百度可以输入首字母，关键字拼音，或关键字都可以匹配，有时在想，是不是百度把相同的关键字代码存了三遍（首字母、拼音、字符串），还是不知道。。。。

下面贴出以前写的一个demo代码，只是实现了文本框获取焦点回车出现提示，使用jquery实现，关于提示条目数量，样式，或者提示后面添加一个搜索结果数量，都可以自己调试出来实现。这个功能最开始是由于进销存系统的物品名称代码输入出现提示。

效果图

代码清单一：index.jsp

<%@ 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>

  <script type="text/javascript" src="jquery.1.4.2.js"></script>

  <script type="text/javascript" src="js.js"></script>

  <script type="text/javascript">

  $(document).ready(function(){

  	$("#usName").bind($.browser.msie? "propertychange": "change",function (){

  	var url= "ajaxTest";

  	var id= "#usName";

  	var keyValue= $("#usName").val();

  	ajax(id,url,keyValue);});

  	$("#ame").bind($.browser.msie? "propertychange":"change",function (){

  	var url= "ajaxTest";

  	var id= "#ame";

  	var keyValue= $("#ame").val();

  	ajax(id,url,keyValue);});

  	$("#yy").bind($.browser.msie? "propertychange": "change",function (){

  	var url= "ajaxTest";

  	var id= "#yy";

  	var keyValue= $("#yy").val();

  	ajax(id,url,keyValue);});

  	$("#ss").bind($.browser.msie? "propertychange": "change",function (){

  	var url= "ajaxTest";

  	var id= "#ss";

  	var keyValue= $("#ss").val();

  	ajax(id,url,keyValue);});

  	$("#dd").bind($.browser.msie? "propertychange": "change",function (){

  	var url= "ajaxTest";

  	var id= "#dd";

  	var keyValue= $("#dd").val();

  	ajax(id,url,keyValue);});

  });

  </script>

  </head>

  <body>

    <input type="text" name="usName" id="usName"/>

             

     <input type="text" name="ame" id="ame"/>

              

      <input type="text" name="yy" id="yy"/>

               

      <input type="text" name="ss" id="ss"/>

               

      <input type="text" name="dd" id="dd"/>

  </body>

</html>

　　框框多了点 好丑吧，

代码清单2：导入的js文件  其实就是对HTML操作，给文本框定位，取到数据后在位置处下方创建表格（即提示的数据）

var line = 0;

function del() {

	if ($("#newDiv")) {

		$("#newDiv").remove();

		line = 0;

	}

}

$(document.body).click(function () {

	del();

});

function ajax(id, url, keyValue) {

	 $(document.body).click(function(){

                del();

            });

	var top = $(id).offset().top;

	var left = $(id).offset().left;

	var newDiv = $("<div/>").width($(id).width() + 6).css("position", "absolute").css("backgroundColor", "white").css("left", left).css("top", top + $(id).height() + 6).css("border", "1px solid blue").attr("id", "newDiv");

	var table = $("<table border='1' width='100%'/>").attr("cellpadding", "0").attr("cellspacing", "0");

	$.post(url, {key:keyValue}, function (data) {

		for(var i=0;i<data.result.length;i++){

			var item = data.result[i];

            var key = item.key;

            var count = item.count;

            var tr = $("<tr/>").css("cursor","pointer").mouseout(function(){

            	$(this).css("backgroundColor","white").css("color","black");

            }).mouseover(function(){

            	$(this).css("backgroundColor","blue").css("color","white");

            }).click(function(){

            	$(id).val($(this).find("td").eq(0).html());

            	del();

            });

            var td = $("<td/>").html(key).css("fontSize","12px").css("color","green").css("margin","5 5 5 5");

            tr.append(td);

            table.append(tr);

            newDiv.append(table);

		}

	});

		$(document.body).append(newDiv);

		if(id.val()==""){

			$("#newDiv").remove;

		}

}

　　

代码清单3：Ajaxtest.java 后台取到的数据以及接收的数据，这里是假数据

package com;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class Ajaxtest extends HttpServlet {

    public void init() throws ServletException {

        // TODO Auto-generated method stub

        super.init();

    }

    protected void doGet(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        // TODO Auto-generated method stub

        this.doGet(req, resp);

    }

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        resp.setContentType("text/json;charset=utf-8");

        req.setCharacterEncoding("utf-8");

        PrintWriter out = resp.getWriter();

        String key = req.getParameter("key");

        System.out.println(key);

        //生成一个JSONObject对象

        String data = "{}";

        JSONObject jsonObj = JSONObject.fromObject(data);

        List<Map> list = new ArrayList<Map>();

        Map<String,Object> map = new HashMap<String, Object>();

        map.put("key", "1");

        list.add(map);

        map  = new HashMap<String, Object>();

        map.put("key", "2");

        list.add(map);

        map  = new HashMap<String, Object>();

        map.put("key", "3");;

        list.add(map);

        map  = new HashMap<String, Object>();

        map.put("key", "4");

        list.add(map);

        map  = new HashMap<String, Object>();

        map.put("key", "5");

        list.add(map);

        map  = new HashMap<String, Object>();

        map.put("key", "6");

        list.add(map);

        jsonObj.put("result", list);

        System.out.println(jsonObj.toString());

        out.print(jsonObj.toString());

        //这里应该从词库中查找，我在这里就做了假数据了

        out.flush();

        out.close();

    }

    public void destroy() {

        // TODO Auto-generated method stub

        super.destroy();

    }

}

会继续跟进这项技术，需要源代码留邮箱

jquery实现百度类似搜索提示功能（AJAX应用）的更多相关文章

  1. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  3. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  4. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  5. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  6. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  7. lucene的suggest(搜索提示功能的实现）

    1.首先引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.lucene/lucene-suggest --> <!-- ...

  8. solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

    首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...

  9. AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作

    <script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...

随机推荐

  1. [转]JAVA程序执行顺序，你了解了吗：JAVA中执行顺序，JAVA中赋值顺序

    本文主要介绍以下两块内容的执行顺序,熟悉的大虾可以直接飘过. 一.JAVA中执行顺序 静态块 块 构造器 父类构造器 二.JAVA中赋值顺序 静态块直接赋值 块直接赋值 父类继承的属性已赋值 静态变量 ...

  2. [原创]java WEB学习笔记98：Spring学习---Spring Bean配置及相关细节：如何在配置bean，Spring容器（BeanFactory,ApplicationContext），如何获取bean，属性赋值（属性注入,构造器注入），配置bean细节（字面值,包含特殊字符，引用bean，null值，集合属性list map propert），util 和p 命名空间

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. Android – 学习操作NFC – 2

    在<Android – 学习操作NFC – 1>说明了Android在处理NFC tag的机制.tag dispatch system的运作流程,以及三种ACTION_NDEF_DISCO ...

  4. axure rp pro 7.0(页面原型工具)

    axure rp pro 7.0 下载连接:地址

  5. 复制 replication 新增表 add new article

    immediate_sync   false   Synchronization files are created only if there are new subscriptions. Subs ...

  6. Android系统下，用adb实现自动获取应用性能数据

    [自动化测试模式] 支持以adb shell命令的形式启动和运行.需要注意的是,office系列软件可能会更改命令中的字符,导致命令不可用!请手工输入命令,或从附带的command.txt文本中复制. ...

  7. CentOS 6.4下编译安装 gcc-4.8.0（转）

    转:http://www.centoscn.com/image-text/install/2014/0807/3454.html 1.首先下载源代码 wget http://ftp.gnu.org/g ...

  8. 20145227&20145201 《信息安全系统设计基础》实验一 开发环境的熟悉

    北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级:1452 姓名:李子璇 鄢曼君 学号:20145201 20145227 成绩: 指导教师:娄嘉鹏 实验日期:2016 ...

  9. js页面刷新之实现框架内外刷新（整体、局部）

    这次总结的是框架刷新: 框架内外的按钮均可以定义网页重定向, 框架内部页面的按钮可以实现局部刷新, 框架外部页面的按钮可以实现整页刷新. 代码如下(两个html页面): <!--主界面index ...

  10. ShadowGun Demo学习(非技术向)

    主要针对拿来主义,并对一些使用范围广的shader进行研究.虽然是4,5年前的demo,但还是有学习价值的 1.GodRays MADFINGER/Transparent/GodRays 传统的上帝之 ...