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 ...

随机推荐

Javascript获取不重复的随机数值
/** * 获取不重复随机数 * @param integer start 随机数最小值 * @param integer end 随机数最大值 * @param integer size 随机数获取 ...
实验吧Web-Forms
链接: http://www.shiyanbar.com/ctf/1819 题目: F12调试: 果断把showsource域的value值改为1 在框里随便输入内容,回车,显示出了源代码说明Pin ...
$_SERVER 等超全局数组的用法 $_COOKIE $_GET $_SESSION
$_SERVER 服务器和执行环境信息例如 $_SERVER['SERVER_NAME']; 当前运行脚本所在的服务器的主机名.如果脚本运行于虚拟主机中,该名称是由那个虚拟主机所设置的值决定.$_G ...
redis ：初步使用
redis : 1.ubuntu安装 'pip install redis-server' 2.启动 'redis-cli' 3.使用 set: set a 1 get: get a fl ...
Dokan[转]
原文地址:http://www.cnblogs.com/xxonehjh/p/3634889.html 因工作需要,最近与同事合作使用Dokan开发了一个虚拟磁盘的简单程序,初步实现了远程目录映射到本 ...
5、判断、循环、数组综合练习案例（迷你DVD）
迷你dvd代码如下: package com.manager; import java.util.Scanner; public class DVDManage { public static voi ...
python Asyncore.dispatcher 理解
1.Asyncore是python的标准库.Asyncore.dispatcher 是这个库中的一个socket的框架,为socket添加了一些通用的回调方法,比如: def listen(self, ...
Java 容器一些知识
一.Collection 1.static 方法: Collections.sort(List<T>):实现List排序功能 Collections.fill(List<T> ...
chapter 13_4 跟踪table的访问
__index和__newindex都是在table中没有所需访问的index时才发挥作用. 因此,只有将一个table保持为空,才有可能捕捉到所有对它的访问.为了监视一个table的所有访问,就应该 ...
阿里云ECOS 集群方案
转载 https://it.toggle.cn/article_detail/7e6f674b2564d6c319f807b4fda87eac.html 架构说明前端由阿里云SLB统一分发Web请求 ...

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

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

随机推荐

热门专题