随笔 - 100  文章 - 50  trackbacks - 0
<2024年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

文章档案

收藏夹

我收藏的一些文章!

搜索

  •  

最新评论

阅读排行榜

评论排行榜

普通实现:
<!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>实现自动提示的文本框</title>
<style type="text/css">
<!--
body {
 font-family: Arial;
 font-size:12px;
 padding:0px; margin:5px;
}
form {
 padding:0px; margin:0px;
}.
input {
 font-family: Arial;font-size:12px;
 padding:1px; margin:0px;
 border: 1px solid #000000;
 width: 200px;
}
#popup {
 position:absolute;width: 202px;
 color:#004a7e; font-family: Arial;font-size:12px;
 left:41px; top:25px;
}
#popup.show {
 border:1px solid #004a7e;
}
#popup.hide {
 border:none;
}
ul{
 list-style:none;
 color:#004a7e;
 padding:0px; margin:0px;
}
li.mouseOver{
  background-color:#004a7e;
  color:#FFFFFF;
}
li.mouseOut{
  background-color:#FFFFFF;
  color:#004a7e;
}
-->
</style>
<script src="../Jscript/jquery-1.4.2.js"></script>
<script type="text/javascript">
var inputField;
var popDiv;
var colorsUI;
var xmlHttp;
function createHttpRequest()
{
 // var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}
function initVars(){
 inputField = document.getElementById("colors");
 popDiv = document.getElementById("popup");
 colorsUI = document.getElementById("colors_ul");
}
function clearColors(){
 for(var i =colorsUI.childNodes.length-1; i>=0; i--){
  colorsUI.removeChild(colorsUI.childNodes[i]);
 }
 popDiv.className="hide";
}
function setColors(the_colors){
 clearColors();
 popDiv.className="show";
 var oLi;
 for(var i = 0; i<the_colors.length; i++){
  oLi = document.createElement("li");
  colorsUI.appendChild(oLi);
  oLi.appendChild(document.createTextNode(the_colors[i]));
  oLi.onmouseover = function(){
   this.className = "mouseOver";
  }
  oLi.onmouseout = function(){
   this.className = "mouseOut";
  }
  oLi.onclick = function(){
   inputField.value=this.firstChild.nodeValue;
   clearColors();
  }
 }
}
function findColors(){
 initVars();
 if(inputField.value.length > 0){
  createHttpRequest();
  var sUrl ="auto_prompt.jsp?sColor="+inputField.value+"&timesstamp="+new Date().getTime();
  xmlHttp.open("GET",sUrl,true);
  xmlHttp.onreadystatechange=function(){
    if (xmlHttp.readyState==4 && xmlHttp.status==200){
     var aResult = new Array();
     if(xmlHttp.responseText.length){
      aResult = xmlHttp.responseText.split(",");
      setColors(aResult);
     }else{
      clearColors();
     }
      }
     }
  xmlHttp.send(null);
 }else{
  clearColors();
 }
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();">
</form>
<div id="popup">
 <ul id="colors_ul"></ul>
</div>
</body>
</html>

JQuery 实现自动提示的文本框

<!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>JQuery 实现自动提示的文本框</title>
<style type="text/css">
<!--
body {
 font-family: Arial;
 font-size:12px;
 padding:0px; margin:5px;
}
form {
 padding:0px; margin:0px;
}
input {
 font-family: Arial;font-size:12px;
 padding:1px; margin:0px;
 border: 1px solid #000000;
 width: 200px;
}
#popup {
 position:absolute;width: 202px;
 color:#004a7e; font-family: Arial;font-size:12px;
 left:41px; top:25px;
}
#popup.show {
 border:1px solid #004a7e;
}
#popup.hide {
 border:none;
}
ul{
 list-style:none;
 color:#004a7e;
 padding:0px; margin:0px;
}
li.mouseOver{
  background-color:#004a7e;
  color:#FFFFFF;
}
li.mouseOut{
  background-color:#FFFFFF;
  color:#004a7e;
}
-->
</style>
<script src="../Jscript/jquery-1.4.2.js"></script>
<script type="text/javascript">
var inputField;
var popDiv;
var colorsUI;
function initVars(){
 inputField = $("#colors");
 popDiv = $("#popup");
 colorsUI = $("#colors_ul");
}
function clearColors(){
 colorsUI.empty();
 popDiv.removeClass("show");
}
function setColors(the_colors){
 clearColors();
 popDiv.addClass("show");
 for(var i = 0; i<the_colors.length; i++){
  colorsUI.append($("<li>"+the_colors[i]+"<li>"));
  colorsUI.find("li").click(function(){
   inputField.val($(this).text());
   clearColors();
   }).hover(
    function(){ $(this).addClass("mouseOver");},
    function(){ $(this).removeClass("mouseOver");}
     );
 }
}
function findColors(){
 initVars();
 if(inputField.val().length > 0){
  $.get("auto_prompt.jsp", {sColor:inputField.val()},
   function(data){
     var aResult = new Array();
     if(data.length > 0 ){
      aResult = data.split(",");
      setColors(aResult);
     }else{
      clearColors();
     }
  });
 }else{
  clearColors();
 }
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();">
</form>
<div id="popup">
 <ul id="colors_ul"></ul>
</div>
</body>
</html>
服务器端简单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">
<%@ page import="java.util.Date" %>
<title>Jquery ajax</title>
</head>
<body>
<%
//response.addHeader("pragma","no-cache");
String input = request.getParameter("sColor").trim();
if(input.length()==0)
 return ;
String result="";
String [] aColors ={"a","and","as", "are","about","all", "adobe","an","account",
  "b","be","bye","boy","business","back","because","before","book","below","been","blog","box"};
 for(int i= 0 ; i<aColors.length; i++){
  if(aColors[i].indexOf(input) == 0)
   result+= aColors[i]+",";
 }
 if(result.length() > 0){
  result = result.substring(0, result.length()-1);
 }
response.getWriter().write(result);
response.getWriter().close();
%>
</body>
</html>

posted on 2012-11-30 10:35 fly 阅读(195) 评论(0)  编辑  收藏 所属分类: JavaScript学习

只有注册用户登录后才能发表评论。


网站导航: