自动提示文本框首先离不开文本框<input type="text">本身、而提示框则采用<div>块内嵌项目列表<ul>来实现。当前用户在文本框中每输入一个字符(onkeyup事件)时就在预定的"颜色名称集(功能很小很小)"中查找、找到匹配的项就动态加载到<ul>中、显示给用户选择、HTML代码如下：
<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>
考虑到<div>块的位置必须出现在输入框的下面、因此采用css的绝对定位、并设置两个边框属性、一个用于有匹配结果时显示提示框<div>、另一个用于未查到匹配结果时隐藏提示框。相应的页面设置和表单的css样式如下：
<style>
<!--
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; padding: 0px; margin: 5px;
}
form{padding: 0px; margin: 0px;}
input{
/*用户输入框的样式*/
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; border: 1px solid #000000;
width: 200px; padding: 1px; margin: 0px;
}
#popup{
/*提示框div块的样式*/
position: absolute; width: 202px;
color: #004a7e; font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
left: 36px; top: 25px;
}
#popup.show{
/*显示提示框的边框*/
border: 1px solid #004a7e;
}
#popup.hide{
/*隐藏提示框的边框*/
border: none;
}
-->
</style>
当用户在文本框中输入任意一个字符时、则在预定好的"颜色名称集"中搜索。如果找到匹配的项则存在一个数组中、并传递给显示提示框的函数setColors()、否则利用函数clearColors()清除提示框、代码如下：
var oInputField;
var oPopDiv;
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black" +
"","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +
"","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];
aColors.sort(); //按字母排序
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i = 0 ; i < aColors.length ; i++ ){
//必须是从单词的开始处匹配
if(aColors[i].indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //加入结果
}
if(aResult.length > 0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则就清除、用户多输入一个字母
clearColors(); //就有可能从有匹配到无、到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框
}
所谓的"颜色名称集合"就是一个特定的数组aColors、里面存放了很多预定好的颜色名称、实际运用中这个数组应该是服务器上的动态数据、明天来加上、用Ajax方式把后台数据查询出来、付给这个数组。其实很简单、然而数据库怎么存储、跟查询时sql语句的拼写、就很重要了、不过我基本上一点也不了解这方面的东西！
setColors()和clearColors()分别用来显示和清除提示框、用户每输入一个字符就调用一次findColors()函数、找到匹配项时调用setColors()、否则调用clearColors()。
传递给setColors()的参数是一个数组、里面存放着所有匹配用户输入的数据、因此setColors()的职责就是将这些匹配项一个个放入<li>中、并添加到<ul>里、而clearColors()则直接清除整个提示框即可。代码如下：
function clearColors(){
//清除提示内容
for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide" ;
}
function setColors(the_colors){
//显示提示框、传入的参数即为匹配出来的结果组成的数组
clearColors(); //没输入一个字母就先清楚原先的提示、再继续
oPopDiv.className = "show" ;
var oLi ;
for(var i = 0 ; i < the_colors.length ; i++ ){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = "mouseOver" ; //鼠标指针经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut" ; //鼠标指针离开时恢复原样
}
oLi.onclick = function(){
//用户单击某个匹配项时、设置输入框为该项的值
oInputField.value = this.firstChild.nodeValue;
clearColors(); //同时清除提示框
}
}
}在给提示框中的每一项<li>添加鼠标事件、鼠标经过时高亮显示、单击鼠标时则自动将选项赋给输入框、并清空提示框。<ul>的css样式风格如下：
<style>
<!--
/*提示框的样式风格*/
ul{
list-style: none;
margin: 0px; padding: 0px;
}
li.mouseOver{
background-color: #004a7e;
color: #FFFFFF;
}
li.mouseOut{
background-color: #FFFFFF;
color: #004a7e;
}
-->
</style>
完整代码如下：
<%@ 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>
<base href="<%=basePath%>">
<title>匹配用户输入</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>
<!--
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; padding: 0px; margin: 5px;
}
form{padding: 0px; margin: 0px;}
input{
/*用户输入框的样式*/
font-family: Arial,Helvetica,sans-serif;
font-size: 12px; border: 1px solid #000000;
width: 200px; padding: 1px; margin: 0px;
}
#popup{
/*提示框div块的样式*/
position: absolute; width: 202px;
color: #004a7e; font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
left: 36px; top: 25px;
}
#popup.show{
/*显示提示框的边框*/
border: 1px solid #004a7e;
}
#popup.hide{
/*隐藏提示框的边框*/
border: none;
}
/*提示框的样式风格*/
ul{
list-style: none;
margin: 0px; padding: 0px;
}
li.mouseOver{
background-color: #004a7e;
color: #FFFFFF;
}
li.mouseOut{
background-color: #FFFFFF;
color: #004a7e;
}
-->
</style>
<script type="text/javascript">
var oInputField;
var oPopDiv;
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black" +
"","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +
"","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];
aColors.sort(); //按字母排序
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i = 0 ; i < aColors.length ; i++ ){
//必须是从单词的开始处匹配
if(aColors[i].indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //加入结果
}
if(aResult.length > 0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则就清除、用户多输入一个字母
clearColors(); //就有可能从有匹配到无、到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框
}
function clearColors(){
//清除提示内容
for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide" ;
}
function setColors(the_colors){
//显示提示框、传入的参数即为匹配出来的结果组成的数组
clearColors(); //没输入一个字母就先清楚原先的提示、再继续
oPopDiv.className = "show" ;
var oLi ;
for(var i = 0 ; i < the_colors.length ; i++ ){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i]));
oLi.onmouseover = function(){
this.className = "mouseOver" ; //鼠标指针经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut" ; //鼠标指针离开时恢复原样
}
oLi.onclick = function(){
//用户单击某个匹配项时、设置输入框为该项的值
oInputField.value = this.firstChild.nodeValue;
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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
