一个简单的Ajax下拉列表应用

最新推荐文章于 2022-12-18 11:10:01 发布

cuijing15

最新推荐文章于 2022-12-18 11:10:01 发布

阅读量361

点赞数

分类专栏： Ajax 文章标签： ajax function xmlhttprequest autocomplete div html

本文链接：https://blog.csdn.net/cuijing15/article/details/6233580

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jsp页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>AJAX输入提示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css" media="screen">
     .onmouset_out {
       background-color: #99CCFF;
       padding: 2px 6px 2px 6px;
     }
     .onmouset_over {
       background-color: #006600;
       padding: 2px 6px 2px 6px;
     }
     #result_display {
       border: 1px solid #FFFFFF;
     }
    </style>
<script type="text/javascript">
   var xmlHttp;
   function createXmlHttp() {
     if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
     } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
   function inputSuggest() {
      var shipName = document.getElementById('txt').value;
      createXmlHttp();
   xmlHttp.onreadystatechange = _handle;
   url = <%=request.getContextPath()%>/purveyfactory.do?methods=selectClassificationVendor&selectvendor="+shipName
         xmlHttp.open("get", url, true);
         xmlHttp.send(null);
   }
   function _handle() {
      if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
    var str = xmlHttp.responseText.split("#");
    var s = document.getElementById('result_display')
                s.innerHTML = '';
                for(i=0; i < str.length - 1; i++) {
                   var suggest = '<div οnmοuseοver="onmouseOver(this);" ';
                   suggest += 'οnmοuseοut="onmousetOut(this);" ';
                   suggest += 'οnclick="setSuggestValue(this.innerHTML);" ';
                   suggest += 'class="onmouset_out">' + str[i] + '</div>';
                   s.innerHTML += suggest;
                }
   }
   }
   }
      function onmouseOver(div) {
         div.className = 'onmouse_over';
      }
      function onmousetOut(div) {
         div.className = 'onmouset_out';
      }
      function setSuggestValue(value) {
         document.getElementById('txt').value = value;
         document.getElementById('result_display').innerHTML = '';
      }
</script>
</head>

<body>
    <h3>一个简单的AJAX输入提示</h3>
     <form id="frmSearch" action="">
       <input type="text" id="txt" name="author" alt="输入条件" οnkeyup="inputSuggest();" style="width:200px" autocomplete="off"/>
       <input type="submit" id="search" value="搜索" alt="搜索"/><br />
       <div id="result_display" style="width:200px">
       </div>
     </form>
</body>
</html>

cuijing15

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个简单的Ajax下拉列表应用

jsp页面代码：String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>AJAX输入提示
复制链接

扫一扫

专栏目录