欢迎技术交流。 QQ:138986722
自动提示文本框首先离不开文本框<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>
图是运行效果、IE8跟火狐都行:
完整代码如下:
<%@ 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>