仿百度搜索框自动下拉提示-白红宇

仿百度搜索框自动下拉提示

阅读量：6801 次

发布时间：2019-06-26

本文共 2460 字，大约阅读时间需要 8 分钟。

先上效果.

说明:这里重在前端实现,js部分,这里输入a 弹出"ajax" 和"ajax 教程"只是后台集合模拟的数据.通过ajax返回到前端的与a匹配的数据.

基础: html,JavaScript,ajax,css,servlet.

实现原理:

　　总体思路:输入框监测键盘动作,按压后,获取当前input 的value,异步发送到后台,匹配数据库数据,返回json结果集到前端,js动态植入到html中.

说起来挺简单的,实际上有很多细节要处理,

1)输入a后,删除a ,下拉框东西要全部清除.

2)输入a后再输入j,要把之前a弹出的下拉提示删了,换成aj做为keyword换取的下拉提示.

3)input失去焦点,下拉提示消失,获得焦点,下拉提示又出现

4)鼠标移动到下拉提示中的某一个选项后 ,该选项颜色突会出显示,移走后颜色又恢复正常.

5)下拉框的定位等问题.

提示:以上描述可能比较抽象,可以参照百度,试一下,就容易理解些.

重点!!!!

前端部分:

1 <%@ page language="java" pageEncoding="UTF-8"%>  2   3   4   5  23  24  25     
      
        26         
        27         
        28         
       
         29             
        
          31                 
           32                     
 33  34                 
 35             
                            
        
 36         
       
 37     
      
 38  39  40 113

前端代码

后台部分:

1 package search_test; 2  3 import java.io.IOException; 4 import java.util.ArrayList; 5 import java.util.List; 6  7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest;10 import javax.servlet.http.HttpServletResponse;11 12 13 import net.sf.json.JSONArray;14 /**15  * 模拟后台输入关键字返回结果16  * @author kingshing17  *18  */19 public class SearchServlet extends HttpServlet {20     static private List
      
        list = new ArrayList
       
        ();21     static{22         list.add("薛傻逼");23         list.add("薛之谦");24         list.add("凯逼");25         list.add("凯逼 是sb");26         list.add("ajax");27         list.add("ajax 教程");28     }29 30     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {31             request.setCharacterEncoding("utf-8");32             response.setCharacterEncoding("utf-8");33             String  keyword  = request.getParameter("keyword");34             List
        
          res  = new ArrayList
         
          ();35             36             for (String string : list) {37                 if (string.contains(keyword)){38                     res.add(string);39                 }40             }41             JSONArray jsonArray = JSONArray.fromObject(res);42             System.out.println(jsonArray.toString());43             response.setContentType("text/html");44             response.getWriter().write(jsonArray.toString());45     }46 }

View Code