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. List之根据某个字段在add的时候过滤掉重复的数据

    下面是重写ArrayList,并保证ChooseCars里面alpha字段不重复的例子 public class DistinctList extends ArrayList<ChooseCar ...

  2. vs2008试用版的评估期已经结束解决办法

    1.控制面板----程序和功能----找到VS2008,打开"卸载/更改". 2.下载补丁:files.cnblogs.com/elaky/PatchVS2008.zip 打补丁之 ...

  3. Spring Aop详尽教程

    一.概念 AOP(Aspect Oriented Programming):面向切面编程. 面向切面编程(也叫面向方面编程),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用AO ...

  4. 《JS权威指南学习总结--7.8 数组方法》

    内容要点: 一.join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生产的字符串. 可以指定一个可选的字符串在生产的字符串中来分隔数组的各个元素.如果不指定分 ...

  5. JavaScript的正则表达式

    1.文本框只能输入数字(不包括小数点) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpas ...

  6. ckplayer 参数设置详解

    参数   使用说明 f s=0时地为普通的视频地址s=1时是一个网址,网址里存放视频地址s=2时是一个网址,网址里输出xml格式的视频地址s=3时是一个swf文件地址,swf和播放器进行交互读取地址 ...

  7. reshape2 数据操作 数据融合 （melt）

    前面一篇讲了cast,想必已经见识到了reshape2的强大,当然在使用cast时配合上melt这种强大的揉数据能力才能表现的淋漓尽致. 下面我们来看下,melt这个函数以及它的特点. melt(da ...

  8. POJ 3537 Crosses and Crosses（SG/还未想完全通的一道SG）

    题目链接 #include<iostream> #include<cstdio> #include<cstring> using namespace std; ]; ...

  9. WebApi 跨域问题解决方案：CORS

    注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...

  10. MAC VIM 自定义主题

    先从百度云下载 两个 文件 molokai.vim MacVim-snapshot-73-Mavericks.tbz 把macvim 拖到 应用程序里 ,把 mvim 放到 /bin/ 文件夹里 把 ...