jquery实现百度类似搜索提示功能（AJAX应用）

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

下面贴出以前写的一个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 stubsuper.init();}protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// TODO Auto-generated method stubthis.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 stubsuper.destroy();}
}

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

转载于:https://www.cnblogs.com/huxdiy/p/3722375.html

jquery实现百度类似搜索提示功能（AJAX应用）相关推荐

通过jQuery实现淘宝搜索提示功能
一.先来展示下功能: 淘宝搜索提示功能二.实现: 1.大体实现思路: 先从input框里获得输入的内容,再把得到的内容通过jQuery封装的ajax以jsonp的形式发送出去.接着把响应回来的数据渲 ...
百度下线搜索快照功能，内部人士：因技术升级导致功能淘汰；法国App开发者集体起诉苹果；Linux 5.19 发布|极客头条...
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
百度下线搜索快照功能，内部人士：因技术升级导致功能淘汰；法国App开发者集体起诉苹果；Linux 5.19 发布|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能
首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...
solr入门之参考淘宝搜索提示功能优化拼音加汉字搜索功能
http://blog.csdn.net/sqh201030412/article/details/51211551 首先看一下从淘宝输入搜索关键字获取到的一些数据信息: 第一张:使用拼音的全程来查询 ...
jquery autocomplete 实现搜索提示功能，中文/拼音也没问题
1.接下来我们根据我写的实例来讲解: 效果如下图所示 2.注意jquery 的类库要用 jquery autocomplete 自带的库下载地址: jquery.autocomplete1.1.z ...
一个通用的ajax程序（实现像百度一样自动提示功能）
1.jsp+javabean实现ajax (1),<script type="text/javascript"> String.prototype.trim=funct ...
Ajax搜索提示功能
/Files/hayden/BaiduAjax.rar 转载于:https://www.cnblogs.com/hayden/archive/2009/10/26/1589922.html
从东莞扫黄看谷歌百度的搜索提示
高德软件周一宣布,阿里巴巴集团将以每股ADS股份21美元的价格收购该公司.高德软件随后向美国证券交易委员会(SEC)提交了这一收购的要约.阿里目前已经持有高德公司28%股份,交易完成后,高德将成为阿里 ...
php联想输入,自动联想搜索提示功能
var currentUrl = "<?=urldecode(Url::toRoute(['/article/default/index']))?>"; var Aut ...

jquery实现百度类似搜索提示功能（AJAX应用）

jquery实现百度类似搜索提示功能（AJAX应用）相关推荐

最新文章

热门文章