<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<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:41px; 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 language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple","antiquewith","blanchedalmond","blueviolet","beige","burlywood","bisque","cadetblue","saddlebrown","royalblue","rosybrown","orengered","olivedrab","powderblue","peachpuff","papayawhip","paleturquoise","palevioletred","palegreen","navyblue","navajowhite","palegodenrod","violetred","yellowgreen","tomato","turquoise","thistle","springgreen","steelblue","salmon","scarlet","silver","violet","snow","tan","chartreuse","khaki","mediumslateblue","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","dimgray","darksalmon","slategray","skyblue","sienna","seashell","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","mediumaquamarine","maroon","limegreen","lightyellow","lightsteelblue","magenta","lightslateblue","lightslategray","lightskyblue","inen","lightseagreen","lightsalmon","lightpink","lightgray","lightgreen","lightgodenrodyellow","indianred","lavender","lightblue","lavenderblush","lightcoral","lightcyan","lightgodenrod","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","cyan","darkgray","cornsilk","darkolivegreen","darkgoldenrod","darkblue","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue"];
aColors.sort(); //按字母排序，使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
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(); //同时清除提示框
}
}
}
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(); //无输入时清除提示框（例如用户按del键）
}
</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>
相关推荐
然而，为了提供更好的用户体验，开发者经常需要扩展TextView的功能，例如实现自动提示文本输入的功能。这在创建搜索框、输入表单或建议性文字输入场景中非常常见。本文将深入探讨如何创建一个自定义的TextView，使其...
自动提示文本输入(TextView)功能源码实现拼音汉字匹配且支持首字母，该功能主要是通过重写Adapter实现的，关键代码就是重写了Filter了，这个源码功能可以直接导入就可以使用的，大家可以看看吧。 使用说明： 1...
自动提示文本输入(TextView)功能源码，源码AutoCompleteTextView，实现拼音汉字匹配且支持首字母，该功能主要是通过重写Adapter实现的，关键代码就是重写了Filter了，这个源码功能可以直接导入就可以使用的，大家...
本资源提供的是易语言中关于点击按钮自动变换文本的源码，这对于理解和学习易语言中的事件处理以及动态文本更新具有重要意义。 在易语言中，程序界面的交互通常通过事件来实现。事件是用户与界面元素交互时发生的...
这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。主要参数介绍： serviceUrl：Ajax 请求的 URL； lookup：本地数据数组； minChars：...
- 在运行时，当用户的鼠标光标悬浮在菜单项上时，这些提示文本会自动以气泡形式显示出来，提供额外的说明。 3. 源码实现： - 易语言的源码通常包括了创建菜单项、设置其属性以及响应菜单事件的代码。例如，你...
在本文中，我们将探讨如何利用MFC中的CComboBox控件实现类似于百度和Google搜索的自动提示功能。在传统的MFC库中，CComboBox控件并未内置自动提示输入的功能，但通过一些技巧和自定义处理，我们可以模拟出这种效果。...
在输入框中自动提示文本。 HTMLAPP-网页设计作业-前端作业-JavaScript作业-大学生作业-计算机课程 htmlapp书上的作业 直接打开html就可以 项目包里面有作业：上传文件 ；为视频播放器设置截图功能 ；验证表格是否为...
为了提供更好的用户体验，开发者经常需要为TextBox添加自动提示、自动完成和自动补全的功能。这些特性可以帮助用户更快地输入信息，尤其是在处理长文本或者需要从预定义的数据集中选择内容时。 一、TextBox自动提示...
这可以是一个数组集合，包含字符串或其他对象，每个对象包含提示文本和其他相关信息。 2. **监听键盘事件**：使用`TextInput`组件的`keyUp`事件，当用户停止按键时触发提示逻辑。 3. **匹配输入**：比较用户输入的...
在IT领域，"Suggest自动提示功能"是一种常见的交互设计技术，主要应用于各种输入框，如搜索引擎、文本编辑器或在线表单等。这个功能旨在提高用户体验，通过预测和建议用户可能想要输入的内容来加快输入速度，从而...
在IT领域，"textbox输入框自动提示功能"是一种常见的用户界面设计...通过分析和理解这些文件，我们可以深入学习到如何使用C#和.NET Framework来创建具备自动提示功能的文本输入框，以及如何在实际项目中应用这些技术。
在实际应用中，为了提高用户交互体验，我们常常需要为`dataGridView`的输入框添加自动提示、自动完成和自动补全功能。这些功能能够帮助用户更快地找到或输入他们想要的数据，减少错误输入的可能性。 自动提示...
本篇文章将深入探讨如何实现"提示对话框自动消失"以及"按照规定的倒计时自动消失"的功能。 首先，我们需要理解LabVIEW中的提示对话框（Message Box）基本用法。通常，LabVIEW的标准消息框函数会显示一个带有“确定...
在设计交互式应用时，我们经常需要实现一个功能，即当用户在文本框中输入时，系统能根据输入内容自动给出提示或建议，这通常被称为自动补全或自动提示功能。这种功能在很多地方都能见到，如搜索引擎的搜索框、编程...
【自动提示的EditView】是Android开发中的一个重要概念，它主要涉及到用户界面（UI）设计中的文本输入交互。EditView是Android系统提供的一个用于接收用户输入的视图组件，常见于登录、注册、搜索等场景。它允许用户...
默认情况下，用户可以在文本框中输入文本，但没有自动提示功能。为了实现自动提示，我们需要监听文本框的`textChanged`信号，每当用户输入内容时，这个信号会被触发。 接下来，我们需要实现一个函数，该函数接收...
在给定的代码示例中，`ShowMessageBoxTimeout` 方法接收三个参数：`text`（提示文本）、`caption`（提示框标题）和 `timeout`（超时时间，单位为毫秒）。这个方法首先将关闭提示框的任务放入线程池中执行，然后调用 ...
创建一个新的UserControl，然后在其中添加TextBox，并添加一个TextBlock用于显示提示文本： ```xaml ``` 在代码-behind中，处理TextBox的聚焦和失去焦点事件，以动态显示或隐藏水印文本： ```csharp ...