效果

开发结构参考AJAX,JSON用户校验

主要有两个核心文件

1，处理输入字符，进行后台搜索的servlet

Suggest.java

 package org.guangsoft.servlet;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.sql.Connection;

 import java.sql.PreparedStatement;

 import java.sql.ResultSet;

 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 org.guangsoft.dao.SqlHelper;

 import com.google.gson.Gson;

 public class Suggest extends HttpServlet

 {

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException

     {

         processRequest(request, response);

     }

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException

     {

         processRequest(request, response);

     }

     protected void processRequest(HttpServletRequest request,

             HttpServletResponse response) throws ServletException, IOException

     {

         request.setCharacterEncoding("UTF-8");

         response.setCharacterEncoding("UTF-8");

         response.setContentType("text/html; charset=utf-8");

         PrintWriter out = response.getWriter();

         String word = request.getParameter("word");

         Connection connection = null;

         PreparedStatement prepareStatement = null;

         ResultSet resultSet = null;

         List wordList = new ArrayList<String>();

         try

         {

             connection = SqlHelper.getConnection();

             String sql = "select * from user where username like ? limit 0,5";

             prepareStatement = connection.prepareStatement(sql);

             prepareStatement.setString(1,"%"+word+"%");

             resultSet = prepareStatement.executeQuery();

             while(resultSet.next())

             {

                 wordList.add(resultSet.getString("username"));

             }

             Gson gson = new Gson();

             response.getWriter().print(gson.toJson(wordList));

         }

         catch(Exception e)

         {

             e.printStackTrace();

         }

         finally

         {

             SqlHelper.close(connection, prepareStatement, resultSet);

         }

     }

 }

2，展示前台

suggest.java

 <%@ 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%>">

     <script src="/ajax/js/AjaxUtil.js"></script>

     <style>

         #div01

         {

             border:1px gray solid;

             width:312px;

             height:115px;

             display:none;

         }

         li

         {

             list-style:none;

             width:310px;

         }

         li:hover

         {

             background-color: aqua;

             cursor:pointer;

         }

     </style>

     <script>

         function search(word)

         {

             var div01 = document.getElementById("div01");

             if(word != "")

             {

                 sendAjaxReq("get","suggest?word="+word,null,function(data)

                 {

                     eval("var wordList="+data);

                     div01.innerHTML = "";

                     if(wordList.length != 0)

                     {

                         for(var i = 0; i < wordList.length; i++)

                         {

                             div01.innerHTML += "<li onclick='setWord(this);'>"+wordList[i]+"</li>"

                         }

                         div01.style.display = "block";

                     }

                 });

             }

             else

             {

                 div01.style.display ="false";

             }

         }

         function setWord(li)

         {

             document.getElementById("word").value = li.innerHTML;

             document.getElementById("div01").innerHTML = "";

         }

     </script>

   </head>

   <body>

   <div id="showDiv">

       <input type="text" name="word" id="word" size="40"

           onkeyup="search(this.value);" />

       <input type="button" value="百度一下" onclick="search()">

       <div name="div01" class="div01" id="div01"></div>

   </div>

   </body>

 </html>

AJAX,JSON搜索智能提示的更多相关文章

  1. Servlet+Ajax实现搜索智能提示

    一般在百度搜索框输入关键词时,会弹出一些相关信息提示,方便点选: 页面(search.jsp): <input type="text" name="keyWords ...

  2. 程序员编程艺术第三十六~三十七章、搜索智能提示suggestion,附近点搜索

    第三十六~三十七章.搜索智能提示suggestion,附近地点搜索 作者:July.致谢:caopengcs.胡果果.时间:二零一三年九月七日. 题记 写博的近三年,整理了太多太多的笔试面试题,如微软 ...

  3. Ajax (jquery)实现智能提示搜索框（in Django）

    搜索框输入搜索名字,从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下:          html文件: <!DOCTYPE html> <ht ...

  4. jquery+ajax 实现搜索框提示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. winform 与百度搜索智能提示

    private void textBox1_TextChanged(object sender, EventArgs e) { listBox1.Items.Clear(); if (string.I ...

  6. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  7. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  8. 一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  9. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

随机推荐

  1. 云,git,blog,感想

    最近由于工作的原因,又看了一下git的资料,这次看收获不小,因为之前已经用了一段时间的git了.主要收获就是除了工作,自己平时在练习时使用git也会事半功倍,怎么说呢,没有git之前,相信很多自学的人 ...

  2. codeforces 720A：Closing ceremony

    Description The closing ceremony of Squanch Code Cup is held in the big hall with n × m seats, arran ...

  3. Linux Communication Mechanism Summarize

    目录 . Linux通信机制分类简介 . 控制机制 0x1: 竞态条件 0x2: 临界区 . Inter-Process Communication (IPC) mechanisms: 进程间通信机制 ...

  4. 拉面馆中的移动互联网——无线KPI探讨

    拉面馆中的移动互联网——无线KPI探讨 伴随着这几年超高速发展,移动互联网早已经度过了小米加步枪的散兵游击状态,随着各大公司持重金杀入,无线从几个人的Team,到快速发展为几十.上百人甚至上千人的大部 ...

  5. Servlet之Filter详细讲解

    Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时候,有时候发一些敏感的信息,发出后显示时 就会将敏感信息用*等字符替代,这就是用过滤器对信息进行 ...

  6. Android Studio 的安装和配置篇（Windows篇）

    上一篇介绍完了Android Studio,这一篇就专门来讲讲怎么安装配置的吧. 其实好多人都卡到安装配置这一步,想当初我也是,万恶的XX防火墙,导致下载Android Studio 的gradle异 ...

  7. gdb调试多进程和多线程命令

     gdb调试多进程和多线程命令 来源:http://blog.csdn.net/pbymw8iwm/article/details/7876797 1. 默认设置下,在调试多进程程序时GDB只会调试主 ...

  8. Linux的一些基础

    想要知道你的 Linux 支持的文件系统有哪些,可以察看底下这个目录: [root@www ~]# ls -l /lib/modules/$(uname -r)/kernel/fs 系统目前已加载到内 ...

  9. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  10. ubuntu打不开图形界面，显示run in low_graphic mode

    我上次因为这个问题重装了ubuntu,结果没两天又有问题了,这次我看到了未重启前的提示,说我的硬盘空间剩0kb,所以我心有余悸的想办法留空间,十分担心会有上次的问题出现,为了验证我的想法,我重启了一下 ...