普通實現:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<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+"×stamp="+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" "<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" "<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 閱讀(201)
評論(0) 編輯 收藏 所屬分類:
JavaScript學習