search.jsp（WebContent/jsp/search.jsp）

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

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Search</title>

  <script type="text/javascript">

    /***单机文本框时检查文本框的值***/

    function changeValue(){

        var tab = document.getElementById("tabId");

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

        var inputValue = inputStr.value;

        if(inputStr.value==null || inputStr.value==""){

            tab.style.display='none';

        }else{

            ajax(inputValue);

            tab.style.display='table';

        }

    }

    /***当按下或释放键时检查文本框的值***/

    function checkField(obj){

        var tab = document.getElementById("tabId");

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

        var inputValue = inputStr.value;

        if(obj==null || obj==""){

            tab.style.display='none';

        }else{

            tab.style.display='table';

            ajax(inputValue);

        }

    }

    /***单机td时给文本框赋值***/

    function display(obj){

        var tab = document.getElementById("tabId");

        document.getElementById("inputStr").value=obj.innerHTML;

        tab.style.display='none';

    }

    /***onmouseover事件给文本框赋值***/

    function setInputValue(obj){

        var tab = document.getElementById("tabId");

        document.getElementById("inputStr").value=obj.innerHTML;

    }

    function ajax(param) {

        //先声明一个异步请求对象

        var xmlHttpReg = null;

        if (window.ActiveXObject) {//如果是IE

            xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");

        } else if (window.XMLHttpRequest) {

            xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg

        }

        //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求

        if (xmlHttpReg != null) {

            xmlHttpReg.open("post", "/Test/SearchServlet?param="+param, true);

            xmlHttpReg.send(null);

            xmlHttpReg.onreadystatechange = doResult; //设置回调函数

        }

        //回调函数

        //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

        //设定函数doResult()

        function doResult() {

            if (xmlHttpReg.readyState == 4) {//4代表执行完成

                if (xmlHttpReg.status == 200) {//200代表执行成功

                    var resultValue = xmlHttpReg.responseText;

                    if(resultValue!=null){

                        document.getElementById("tabId").innerHTML=resultValue;

                    }

                }

            }

        }

    }

  </script>

</head>

<body>

    <input type="text" name="inputStr" id="inputStr" onclick="changeValue()" onkeydown="checkField(this.value)" onkeyup="checkField(this.value)">

    <table style="border:1px solid;display:none;cellpadding:0" width="153px" id="tabId">

        <!--

        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">aaaaa</td></tr>

        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">bbbbb</td></tr>

        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ccccc</td></tr>

        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ddddd</td></tr>

         -->

    </table>

</body>

</html>

SearchServlet(com.test.srevlet.SearchServlet)

package com.test.srevlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/SearchServlet")

public class SearchServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public SearchServlet() {

        super();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request, response);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

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

        StringBuffer returnStr = new StringBuffer();

        String[] strs = null;

        if(param.endsWith("aa")){

            strs=new String[]{"a","aa","aaa","aaaa"};

            for (int i = 0; i < strs.length; i++) {

                returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");

                returnStr.append(strs[i]);

                returnStr.append("</td></tr>");

            }

        }else if(param.endsWith("aas")){

            strs=new String[]{"sas","saas","saaas","saaaas"};

            for (int i = 0; i < strs.length; i++) {

                returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");

                returnStr.append(strs[i]);

                returnStr.append("</td></tr>");

            }

        }else if(param.endsWith("aass")){

            strs=new String[]{"f","faa","faaa","faaaa"};

            for (int i = 0; i < strs.length; i++) {

                returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");

                returnStr.append(strs[i]);

                returnStr.append("</td></tr>");

            }

        }else{

            returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\"></td></tr>");

        }

        System.out.println(returnStr.toString());

        response.getWriter().write(returnStr.toString());

    }

}

ajax实例及实现文本框异步搜素的更多相关文章

  1. input文本框实现宽度自适应代码实例，input文本框

    本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...

  2. Ajax - 异步处理（点击变成文本框并修改）

    效果: 对应的文档结构: Test.aspx 前台代码: 引入JQuery(jquery-1.8.3.min.js). 引入自己所写的JS代码(UserJS.js). <html xmlns=& ...

  3. django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  4. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  5. 原生Ajax GET+POST请求无刷新实现文本框用户名是否被注册

    实现Ajax需要使用一个核心对象XMLHttpRequest XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求 ...

  6. input文本框实现宽度自适应代码实例

    代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...

  7. 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例

    http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...

  8. Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）

    >>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...

  9. SAP 文本框实例

    SAP 文本框 简单实例 REPORT ZTEST001. DATA: OK_CODE LIKE SY-UCOMM, SAVE_OK LIKE SY-UCOMM. DATA: REF_EDIT_CTN ...

随机推荐

  1. A * B Problem Plus

    A * B Problem Plus 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1402 FFT(模板题) (FFT的详细证明参见算法导 ...

  2. Linux安全检测常用方法

    一. 系统状态备份 主要是网络.服务.端口.进程等状态信息的备份工作 系统服务备份: chkconfig --list > services.log 进程备份: ps -ef > ps.l ...

  3. Java中的Math类的简单实用

    System.out.println(Math.PI);//获取PI的值 System.out.println(Math.E);//常量E int min = Math.min(5, 4);//求最小 ...

  4. 关于让input=text，checkbox居中的解决方法

    1.type="text"时一般浏览器与IE6在高度上相差2px,并且内容会显示在左上方.解决办法有两种:1.input框的高度不设置,但要设置padding值 2.不设置padd ...

  5. 轻量级的移动框架--zepto.js

    Zepto是一个轻量级的支持移动WebKit浏览器javascript移动端框架,框架支持jQuery语法,该框架的压缩包zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小 ...

  6. 关于ApkTool不同版本在重新打游戏包时候的区别

    在工作中由于使用到将游戏CP提供的apk包重新反编译,然后二次签名出包,所以遇到了一个奇怪的bug. 下面是CP提供的apk包,将近358M 但是在重新编译之后,包变成了250M左右的apk包,虽然可 ...

  7. CF 602C The Two Routes（dij+邻接矩阵）

    (￣▽￣)" #include<iostream> #include<cstdio> #include<cmath> #include<algori ...

  8. poj 1142 Smith Numbers

    Description While skimming his phone directory in 1982, Albert Wilansky, a mathematician of Lehigh U ...

  9. Git子模块引用外部项目

    Git子模块(submodule)简介 经常有这样的事情,当你在一个项目上工作时,你需要在其中使用另外一个项目.也许它是一个第三方开发的库或者是你独立开发和并在多个父项目中使用的.这个场景下一个常见的 ...

  10. 洛谷-三连击（升级版）-BOSS战-入门综合练习1

    题目描述 Description 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成A:B:C的比例,试求出所有满足条件的三个三位数,若无解,输出“No!!!”.  输入输出格 ...