ajax实例及实现文本框异步搜素

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实例及实现文本框异步搜素的更多相关文章

input文本框实现宽度自适应代码实例，input文本框
本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...
Ajax - 异步处理（点击变成文本框并修改）
效果: 对应的文档结构: Test.aspx 前台代码: 引入JQuery(jquery-1.8.3.min.js). 引入自己所写的JS代码(UserJS.js). <html xmlns=& ...
django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...
JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
原生Ajax GET+POST请求无刷新实现文本框用户名是否被注册
实现Ajax需要使用一个核心对象XMLHttpRequest XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求 ...
input文本框实现宽度自适应代码实例
代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...
常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例
http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...
Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
SAP 文本框实例
SAP 文本框简单实例 REPORT ZTEST001. DATA: OK_CODE LIKE SY-UCOMM, SAVE_OK LIKE SY-UCOMM. DATA: REF_EDIT_CTN ...

随机推荐

@InitBinde的作用
@InitBinder用于在@Controller中标注于方法,表示为当前控制器注册一个属性编辑器或者其他,只对当前的Controller有效
设置radio的选中状态
$("#s7").click(function () { var a = document.getElementById("s7"); if (a.checke ...
串string （KMP）
1.Definition 串string,是零个或多个字符组成的有限序列.一般记作S="a1a2a3...an",其中S是串名,双引号括起来的字符序列是串值:ai(1<= i ...
Java8 (1)
参考资料: <Java8 in Action> Raoul-Gabriel Urma 一.jdk8 客观的说,Java8是一次有重大演进的版本,甚至很多人认为java8所做的改变,在许多方 ...
UNIX基础--用户和基本账户管理
账户类型系统账户系统账户运行服务. 系统用户是那些要使用诸如DNS. 邮件, web等服务的用户. 使用帐户的原因就是安全: 如果所有的用户都由超级用户来运行, 那它们就可以不受约束地做任何事情. ...
Visual Studio 2010 安装帮助文档问题
今天重装系统,装完VS2010后,如往常一样安装文档,却弹出如下错误"Could not create the local store in the specified folder.... ...
Matlab中矩阵的平方和矩阵中每个元素的平方介绍
该文章讲述了Matlab中矩阵的平方和矩阵中每个元素的平方介绍. 设t = [2 4 2 4] 则>> t.^2 ans = 4 164 16 而>> t^2 ans = ...
哈密顿圈~Lingo程序
sets: c/1..15/:u; link(c,c):w,x; endsets data: w=@ole('第二题第一组.xls','d'); enddata n=@size(c); min=@su ...
MYSQL：SQL中Group By的使用
SQL中Group By的使用 1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By ...
生成SQL脚本的方法
2点需要注意的关键: (1)选择特定数据库对象不包含用户选项: (2)要编写脚本的数据的类型选择"架构和数据".

ajax实例及实现文本框异步搜素

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

随机推荐

热门专题