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

下面贴出以前写的一个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. 《30天自制操作系统》15_day_学习笔记

    harib12a: 这一部分我们来尝试两个任务的切换.下面我们一步一步的看: 1.定义TSS任务状态段(task statuc segment):定义的一种段,需要在GDT中定义使用 //TSS任务状 ...

  2. Leetcode: Split Array Largest Sum

    Given an array which consists of non-negative integers and an integer m, you can split the array int ...

  3. html5,进度条

    <form action="" id="myform">        <progress value="20" max= ...

  4. NS_ENUM vs. NS_OPTIONS

    NS_ENUM用于定义普通枚举值,NS_OPTIONS用于定义位移相关操作的枚举值: typedef NS_ENUM(NSUInteger, EOCConnectionState) { EOCConn ...

  5. Hadoop 2.0命令手册

    1.       FS Shell 1.1     简介 调用文件系统(FS)Shell命令应使用 bin/hadoop fs <args>的形式. 所有的的FS shell命令使用URI ...

  6. Lucene学习总结

    在使用Lucene前,我们先大致熟悉下Lucene的几个核心类. 核心索引类: public class IndexWriter 索引过程的中心组件,把它想象成一个可以对索引进行写操作的对象. pub ...

  7. win7下JDK环境变量设置方法

    来源于:http://jingyan.baidu.com/article/e9fb46e1b2b3347521f766c1.html

  8. php常用函数汇总

    php常用函数汇总   字符串截取:           1.substr('要截取的字符串','从第几个字符开始','到第几个字符结束');             * 截取英文或者数字       ...

  9. python(二)数据类型

    一.整数 创建方法 i = 10 i = int(10) i = int("10",base=2)  #“”中是几进制的表示,base是选择要表示的进制,如base=2,用2进制的 ...

  10. hasOwnProperty

    var Person = function(){ this.name = "nike"; this.age = "20" } var person = new ...