Ajax怎么做出智能搜索框的提示功能

这次给大家带来Ajax怎么做出智能搜索框的提示功能，Ajax做出智能搜索框提示功能的注意事项有哪些，下面就是实战案例，一起来看一下。

利用无刷新技术智能变换搜索框的提示，同百度搜索

效果图

其基本原理：

1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)

2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗

如下为支持json的jar包

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>








 

  
  
  
  
  

   

  

 

SearchServlet.class

package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet{
 static List datas = new ArrayList();
 static{
  datas.add("ajax1");
  datas.add("ajax2");
  datas.add("ajax3");
  datas.add("bichi1");
  datas.add("bichi2");
  datas.add("php"); 
  datas.add("javascript"); 
  datas.add("java"); 
  datas.add("html"); 
 }
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException {
  //设置下编码格式
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("UTF-8");
  System.out.println("123");
  //首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常
  String keyword = request.getParameter("keyword");
  //获得关键字之后进行处理，得到关联数据
  List listData = getData(keyword);
  //返回json格式
  System.out.println(JSONArray.fromObject(listData));
  //JSONArray.fromObject(listData);
  response.getWriter().write(JSONArray.fromObject(listData).toString());
 }
 //获得关联数据方法
 public List getData(String keyword){
  List list = new ArrayList();
  for(String data:datas){
   //如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传
   if(data.contains(keyword)){
    list.add(data);
   }
  }
  return list;
 }
}

web.xml

 ajaxtest
 
  search.jsp
 
 
 
  search
  com.ninka.SearchServlet
 
 
  search
  /
 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ajax的校验功能怎样用SSM整合框架实现

jQuery输入框自动提示车牌号码验证效果

jQuery输入框自动提示车牌号码验证效果, 输入车牌号，下方提示，例如输入w ,则出现皖 ,这样的一个效果，在商城网站或者企业网站都会用到搜索的功能，与此功能类似，可以参考，php中文网推荐下载！

下载

PHP+Ajax如何实现表格的实时编辑