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. 第七十三节，css盒模型

    css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 CSS盒模型中 ...

  2. H5复制粘贴

    H5 复制粘贴 - execCommand 字数748 阅读399 评论0 喜欢0 需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧) window.clipbo ...

  3. CSS3秘笈复习：第一章&第二章&第三章

    第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@i ...

  4. 7、js使用正则表达式验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Java使用千分位并保留两位小数

    double d = 123456.789; DecimalFormat df = new DecimalFormat("#,##0.00"); System.out.printl ...

  6. webapi中的扩展点

    Extension Points Web API provides extension points for some parts of the routing process. Interface ...

  7. Leetcode 289 Game of Life

    According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...

  8. 【python问题系列--2】脚本运行出现语法错误：IndentationError: unindent does not match any outer indentation level

    缩进错误,此错误,最常见的原因是行之间没有对齐. 参考:http://www.crifan.com/python_syntax_error_indentationerror/comment-page- ...

  9. Python基础篇-day2

    主要内容: for循环 while循环 格式化输出(2) 数据统计及记录 ############################################################# 1 ...

  10. U盘做svn版本控制

    svn提供的访问方式有: file:///本地路径/to/svnrepo/ //访问本地磁盘 http://host/to/svnrepo/ //通过配置subversion的apache服务器的we ...