javaScript自动补全-白红宇

javaScript自动补全

阅读量：6854 次

发布时间：2019-06-26

本文共 6707 字，大约阅读时间需要 22 分钟。

自动提示文本框首先离不开文本框<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>

<!--

/*提示框的样式风格*/

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;

}

/*提示框的样式风格*/

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>

转载于:https://blog.51cto.com/hzw2312/748383

你可能感兴趣的文章