使用jQuery实现类似于百度搜索时的自动完成功能，界面效果 所示。

首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。

  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.         <head>
  5.             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.             <title>搜索词自动完成</title>
  7.  
  8.     <style type="text/css">
  9.     #search {
  10.         text-align: center;
  11.         position: relative;
  12.     }
  13.     .autocomplete {
  14.         border: 1px solid #9ACCFB;
  15.         background-color: white;
  16.         text-align: left;
  17.     }
  18.     .autocomplete li {
  19.         list-style-type: none;
  20.     }
  21.     .clickable {
  22.         cursor: default;
  23.     }
  24.     .highlight {
  25.         background-color: #9ACCFB;
  26.     }
  27.     </style>
  28.     <script type="text/javascript" src="js/jquery-1.11.1.js">
  29.     </script>
  30.     <script type="text/javascript">
  31.     $(function() {
  32.         //取得div层
  33.         var $search = $('#search');
  34.         //取得输入框JQuery对象
  35.         var $searchInput = $search.find('#search-text');
  36.         //关闭浏览器提供给输入框的自动完成
  37.         $searchInput.attr('autocomplete', 'off');
  38.         //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
  39.         var $autocomplete = $('<div class="autocomplete"></div>').hide()
  40.                 .insertAfter('#submit');
  41.  
  42.         //清空下拉列表的内容并且隐藏下拉列表区
  43.         var clear = function() {
  44.             $autocomplete.empty().hide();
  45.         };
  46.         //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
  47.         $searchInput.blur(function() {
  48.             setTimeout(clear, 500);
  49.         });
  50.  
  51.         //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，像百度搜索那样
  52.         var selectedItem = null;
  53.         //timeout的ID
  54.         var timeoutid = null;
  55.         //设置下拉项的高亮背景
  56.         var setSelectedItem = function(item) {
  57.             //更新索引变量
  58.             selectedItem = item;
  59.             //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
  60.             if (selectedItem < 0) {
  61.                 selectedItem = $autocomplete.find('li').length - 1;
  62.             } else if (selectedItem > $autocomplete.find('li').length - 1) {
  63.                 selectedItem = 0;
  64.             }
  65.             //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
  66.             $autocomplete.find('li').removeClass('highlight').eq(selectedItem)
  67.                     .addClass('highlight');
  68.         };
  69.         var ajax_request = function() {
  70.             //ajax服务端通信
  71.             $.ajax( {
  72.                 'url' : 'search.do', //服务器的地址
  73.                 'data' : {
  74.                     'search-text' : $searchInput.val()
  75.                 }, //参数
  76.                 'dataType' : 'json', //返回数据类型
  77.                 'type' : 'POST', //请求类型
  78.                 'success' : function(data) {
  79.                     if (data.length) {
  80.                         //遍历data，添加到自动完成区
  81.                      $.each(data, function(index, term) {
  82.                          //创建li标签,添加到下拉列表中
  83.                         $('<li></li>').text(term).appendTo($autocomplete).addClass(
  84.                                 'clickable').hover(function() {
  85.                             //下拉列表每一项的事件，鼠标移进去的操作
  86.                                 $(this).siblings().removeClass('highlight');
  87.                                 $(this).addClass('highlight');
  88.                                 selectedItem = index;
  89.                             }, function() {
  90.                                 //下拉列表每一项的事件，鼠标离开的操作
  91.                                 $(this).removeClass('highlight');
  92.                                 //当鼠标离开时索引置-1，当作标记
  93.                                 selectedItem = -1;
  94.                             }).click(function() {
  95.                             //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
  96.                                 $searchInput.val(term);
  97.                                 //清空并隐藏下拉列表
  98.                                 $autocomplete.empty().hide();
  99.                             });
  100.                     });//事件注册完毕
  101.                 //设置下拉列表的位置，然后显示下拉列表
  102.                 var ypos = $searchInput.position().top;
  103.                 var xpos = $searchInput.position().left;
  104.                 $autocomplete.css('width', $searchInput.css('width'));
  105.                 $autocomplete.css( {
  106.                     'position' : 'relative',
  107.                     'left' : xpos + "px",
  108.                     'top' : ypos + "px"
  109.                 });
  110.                 setSelectedItem(0);
  111.                 //显示下拉列表
  112.                 $autocomplete.show();
  113.             }
  114.         }
  115.             });
  116.         };
  117.         //对输入框进行事件注册
  118.         $searchInput
  119.                 .keyup(function(event) {
  120.                     //字母数字，退格，空格
  121.                         if (event.keyCode > 40 || event.keyCode == 8
  122.                                 || event.keyCode == 32) {
  123.                             //首先删除下拉列表中的信息
  124.                             $autocomplete.empty().hide();
  125.                             clearTimeout(timeoutid);
  126.                             timeoutid = setTimeout(ajax_request, 100);
  127.                         } else if (event.keyCode == 38) {
  128.                             //上
  129.                             //selectedItem = -1 代表鼠标离开
  130.                             if (selectedItem == -1) {
  131.                                 setSelectedItem($autocomplete.find('li').length - 1);
  132.                             } else {
  133.                                 //索引减1
  134.                                 setSelectedItem(selectedItem - 1);
  135.                             }
  136.                             event.preventDefault();
  137.                         } else if (event.keyCode == 40) {
  138.                             //下
  139.                             //selectedItem = -1 代表鼠标离开
  140.                             if (selectedItem == -1) {
  141.                                 setSelectedItem(0);
  142.                             } else {
  143.                                 //索引加1
  144.                                 setSelectedItem(selectedItem + 1);
  145.                             }
  146.                             event.preventDefault();
  147.                         }
  148.                     }).keypress(function(event) {
  149.                     //enter键
  150.                         if (event.keyCode == 13) {
  151.                             //列表为空或者鼠标离开导致当前没有索引值
  152.                             if ($autocomplete.find('li').length == 0
  153.                                     || selectedItem == -1) {
  154.                                 return;
  155.                             }
  156.                             $searchInput.val($autocomplete.find('li').eq(
  157.                                     selectedItem).text());
  158.                             $autocomplete.empty().hide();
  159.                             event.preventDefault();
  160.                         }
  161.                     }).keydown(function(event) {
  162.                     //esc键
  163.                         if (event.keyCode == 27) {
  164.                             $autocomplete.empty().hide();
  165.                             event.preventDefault();
  166.                         }
  167.                     });
  168.         //注册窗口大小改变的事件，重新调整下拉列表的位置
  169.         $(window).resize(function() {
  170.             var ypos = $searchInput.position().top;
  171.             var xpos = $searchInput.position().left;
  172.             $autocomplete.css('width', $searchInput.css('width'));
  173.             $autocomplete.css( {
  174.                 'position' : 'relative',
  175.                 'left' : xpos + "px",
  176.                 'top' : ypos + "px"
  177.             });
  178.         });
  179.     });
  180.     </script>
  181.         </head>
  182.         <body>
  183.             <div id="search">
  184.                 <label for="search-text">
  185.                     请输入关键词
  186.                 </label>
  187.                 <input type="text" id="search-text" name="search-text" />
  188.                 <input type="button" id="submit" value="搜索" />
  189.             </div>
  190.         </body>
  191.     </html>

baidu.html

  1. public class ActionServlet extends HttpServlet {
  2.     public void service(HttpServletRequest request, HttpServletResponse response)
  3.             throws ServletException, IOException {
  4.         request.setCharacterEncoding("UTF-8");
  5.         response.setContentType("text/html;charset=UTF-8");
  6.         PrintWriter out = response.getWriter();
  7.         String uri = request.getRequestURI();
  8.         String action = uri.substring(uri.lastIndexOf("/"), uri
  9.                 .lastIndexOf("."));
  10.         if (action.equals("/search")) {
  11.             String[] words = { "amani", "abc", "apple", "abstract", "an",
  12.                     "bike", "byebye", "beat", "be", "bing", "come", "cup",
  13.                     "class", "calendar", "china" };
  14.             if (request.getParameter("search-text") != null) {
  15.                 String key = request.getParameter("search-text");
  16.                 if (key.length() != 0) {
  17.                     String json = "[";
  18.                     for (int i = 0; i < words.length; i++) {
  19.                         if (words[i].startsWith(key)) {
  20.                             json += "\"" + words[i] + "\"" + ",";
  21.                         }
  22.                     }
  23.                     json = json.substring(0, json.length() - 1 > 0 ? json
  24.                             .length() - 1 : 1);
  25.                     json += "]";
  26.                     System.out.println("json:" + json);
  27.                     out.println(json);
  28.                 }
  29.             }
  30.         }
  31.         out.close();
  32.     }
  33. }

servlet

搜索自动提示的简单模拟JQuery的更多相关文章

  1. 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示

    需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...

  2. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  3. **IOS自动完成(搜索自动提示)功能实现

    UISearchBar搜索AutoComplete下拉列表搜索提示 http://www.codeios.com/thread-10685-1-1.html 介绍:     在搜索框上加入下拉列表.在 ...

  4. Android搜索自动提示功能 AutocompleteTextView

    1.配置main.xml中自动提示控件: <AutoCompleteTextView android:id="@+id/autotv_searchresult" androi ...

  5. jquery ui autocomplete 模拟百度搜索自动提示

    直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  6. 让你的MyEclipse具有jquery自动提示

    想让你的MyEclipse支持Jquery的自动提示更简单一些,照下图完成即可:      照上面图示已经完成了Jquery自动提示的配置,此时spket已经有两种AJAX库的自动提示,通过右边的De ...

  7. 如何在myeclipse中实现jquery的自动提示功能

    在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料   jquery 1.8.3.js ...

  8. jquery+php实现用户输入搜索内容时自动提示

    index.html <html> <head>     <meta charset=;} #search_auto li a:hover{background:#D8D ...

  9. Jquery 搜索框自动提示

    为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...

随机推荐

  1. (转)shell脚本之文件测试操作符及整数比较符

    shell脚本之文件测试操作符及整数比较符 原文:http://www.cnblogs.com/Steward-Xu/p/6722592.html 一.文件测试操作符: 在书写测试表达式是,可以使用一 ...

  2. c#高级写法

    Linq的参考资料:https://www.cnblogs.com/liqingwen/p/5801249.html 1.判断str字符串中的逗号个数 string str = "1,2,3 ...

  3. ife task0003学习笔记（五）：JavaScript面向对象

    JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.而在 JavaScript 中,this ...

  4. 【数据结构】最小生成树之prim算法和kruskal算法

    在日常生活中解决问题经常需要考虑最优的问题,而最小生成树就是其中的一种.看了很多博客,先总结如下,只需要您20分钟的时间,就能完全理解. 比如:有四个村庄要修四条路,让村子能两两联系起来,这时就有最优 ...

  5. sqlserver 限制用户只能访问指定的视图

    项目中有一个需求,要求给其它单位提供数据,我们用到了视图,并要求不能让他们看到数据库中的其它数据,我们为其创建了单独的账号,并只能看到指定视图 一.创建视图 CREATE VIEW [dbo].[v_ ...

  6. ebiao 报表工具使用入门

    一.ebiao简价 e表是一个功能强大的Web报表工具,可使复杂报表的设计简单化,避免了大量的复杂SQL编写以及编程来准备数据,报表设计的效率大大提高.e表分为e表 for .NET和e表 for J ...

  7. [转]在ASP.NET Core使用Middleware模拟Custom Error Page功能

    本文转自:http://www.cnblogs.com/maxzhang1985/p/5974429.html 阅读目录 一.使用场景 二..NET Core实现 三.源代码 回到目录 一.使用场景 ...

  8. .net 金额中文大写 日期转中文

    金额中文大写 #region 中文大写 /// <summary> /// 返回中文数字 ,如壹佰元整 /// </summary> /// <param name=&q ...

  9. ThenJS

    安装ThenJs:  npm i thenjs 史上最快,与 node callback 完美结合的异步流程控制库 <!doctype html> <html lang=" ...

  10. Java开发中代码规范有哪些？

    Java开发中所要遵守的编码规范大体上有如下7点.命名规范.注释规范.缩进排版规范.文件名规范.声明规范.语句规范以及编程规范. 1.命名规范 (1)所有的标示符都只能用ASCⅡ字母(A-Z或a-z) ...