今天在做JS实现ＨＴＭＬ文本框下拉提示的功能 ， 在网上找到一段代码并对这段代码增加了Cookie功能。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录---文本框输入提示/自动完成功能</title>
<script type="text/javascript">
function mSift_SeekTp(oObj, nDire) {
if (oObj.getBoundingClientRect && !document.all) {
var oDc = document.documentElement;
switch (nDire) {
case 0:
return oObj.getBoundingClientRect().top + oDc.scrollTop;
case 1:
return oObj.getBoundingClientRect().right + oDc.scrollLeft;
case 2:
return oObj.getBoundingClientRect().bottom + oDc.scrollTop;
case 3:
return oObj.getBoundingClientRect().left + oDc.scrollLeft;
}
} else {
if (nDire == 1 || nDire == 3) {
var nPosition = oObj.offsetLeft;
} else {
var nPosition = oObj.offsetTop;
}
if (arguments[arguments.length - 1] != 0) {
if (nDire == 1) {
nPosition += oObj.offsetWidth;
} else if (nDire == 2) {
nPosition += oObj.offsetHeight;
}
}
if (oObj.offsetParent != null) {
nPosition += mSift_SeekTp(oObj.offsetParent, nDire, 0);
}
return nPosition;
}
}
function mSift(cVarName, nMax) {
this.oo = cVarName;
this.Max = nMax;
}
mSift.prototype = {
Varsion : 'v2010.10.29 by AngusYoung | mrxcool.com',
Target : Object,
TgList : Object,
Listeners : null,
SelIndex : 0,
Data : [],
ReData : [],
Create : function(oObj) {
var _this = this;
var oUL = document.createElement('ul');
oUL.style.display = 'none';
oObj.parentNode.insertBefore(oUL, oObj);
_this.TgList = oUL;
oObj.onkeydown = oObj.onclick = function(e) {
_this.Listen(this, e);
};
oObj.onblur = function() {
setTimeout(function() {
_this.Clear();
}, 100);
};
},
Complete : function() {
},
Select : function() {
var _this = this;
if (_this.ReData.length > 0) {
_this.Target.value = _this.ReData[_this.SelIndex].replace(
/\*/g, '*').replace(/\|/g, '|');
_this.Clear();
}
setTimeout(function() {
_this.Target.focus();
}, 10);
_this.Complete();
},
Listen : function(oObj) {
var _this = this;
_this.Target = oObj;
var e = arguments[arguments.length - 1];
var ev = window.event || e;
switch (ev.keyCode) {
case 9://TAB
return;
case 13://ENTER
_this.Target.blur();
_this.Select();
return;
case 38://UP
_this.SelIndex = _this.SelIndex > 0 ? _this.SelIndex - 1
: _this.ReData.length - 1;
break;
case 40://DOWN
_this.SelIndex = _this.SelIndex < _this.ReData.length - 1 ? _this.SelIndex + 1
: 0;
break;
default:
_this.SelIndex = 0;
}
if (_this.Listeners) {
clearInterval(_this.Listeners);
}
_this.Listeners = setInterval(function() {
_this.Get();
}, 10);
},
Get : function() {
var _this = this;
if (_this.Target.value == '') {
_this.Clear();
return;
}
if (_this.Listeners) {
clearInterval(_this.Listeners);
}
;
_this.ReData = [];
var cResult = '';
for ( var i = 0; i < _this.Data.length; i++) {
if (_this.Data[i].toLowerCase().indexOf(
_this.Target.value.toLowerCase()) >= 0) {
_this.ReData.push(_this.Data[i]);
if (_this.ReData.length == _this.Max) {
break;
}
}
}
var cRegPattern = _this.Target.value.replace(/\*/g, '*');
cRegPattern = cRegPattern.replace(/\|/g, '|');
cRegPattern = cRegPattern.replace(/\+/g, '\\+');
cRegPattern = cRegPattern.replace(/\./g, '\\.');
cRegPattern = cRegPattern.replace(/\?/g, '\\?');
cRegPattern = cRegPattern.replace(/\^/g, '\\^');
cRegPattern = cRegPattern.replace(/\$/g, '\\$');
cRegPattern = cRegPattern.replace(/\(/g, '\\(');
cRegPattern = cRegPattern.replace(/\)/g, '\\)');
cRegPattern = cRegPattern.replace(/\[/g, '\\[');
cRegPattern = cRegPattern.replace(/\]/g, '\\]');
cRegPattern = cRegPattern.replace(/\\/g, '\\\\');
var cRegEx = new RegExp(cRegPattern, 'i');
for ( var i = 0; i < _this.ReData.length; i++) {
if (_this.Target.value.indexOf('*') >= 0) {
_this.ReData[i] = _this.ReData[i].replace(/\*/g, '*');
}
if (_this.Target.value.indexOf('|') >= 0) {
_this.ReData[i] = _this.ReData[i].replace(/\|/g, '|');
}
cResult += '<li style="padding:0 5px;line-height:20px;cursor:default;" onmouseover="'
+ _this.oo
+ '.ChangeOn(this);'
+ _this.oo
+ '.SelIndex='
+ i
+ ';" onmousedown="'
+ _this.oo
+ '.Select();">'
+ _this.ReData[i].replace(cRegEx, function(s) {
return s;
});
}
if (cResult == '') {
_this.Clear();
} else {
_this.TgList.innerHTML = cResult;
_this.TgList.style.cssText = 'display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;';
_this.TgList.style.top = mSift_SeekTp(_this.Target, 2) + 'px';
_this.TgList.style.left = mSift_SeekTp(_this.Target, 3) + 'px';
_this.TgList.style.width = _this.Target.offsetWidth - 12 + 'px';
}
var oLi = _this.TgList.getElementsByTagName('li');
if (oLi.length > 0) {
oLi[_this.SelIndex].style.cssText = 'background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;';
}
},
ChangeOn : function(oObj) {
var oLi = this.TgList.getElementsByTagName('li');
for ( var i = 0; i < oLi.length; i++) {
oLi[i].style.cssText = 'padding:0 5px;line-height:20px;cursor:default;';
}
oObj.style.cssText = 'background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;';
},
Clear : function() {
var _this = this;
if (_this.TgList) {
_this.TgList.style.display = 'none';
_this.ReData = [];
_this.SelIndex = 0;
}
}
}
//得到Cookies
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
//设置Cookies
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie()
{
var username=getCookie('username');
var cookievalue=document.getElementById("abc").value;
if(username!=null&&username!=""){
if(username.indexOf(cookievalue)<=-1){
username=username+","+cookievalue;
setCookie('username',username,3);
}
}else{
setCookie('username',cookievalue,3);
}
}
</script>
</head>
<body>
<form name="salefrm" method="post" action="map.html" onsubmit="checkCookie()">用户名:<input
type="text" id="abc" name="abc" value="J" size="40" /> <input type="submit"
value="提交" /></form>
<script type="text/javascript">
var uname=getCookie('username');
var arr=uname.split(',');
var oo = new mSift('oo', 20);
oo.Data =arr;
oo.Create(document.getElementById('abc'));
</script>
</body>
</html>
以上就是今天研究 HTML 文本框下拉提示的代码，如有问题请留言。。
分享到：
相关推荐
总结来说，这个实例展示了如何使用JavaScript和CSS创建文本框下拉提示，同时利用Cookie存储用户的选择，以实现更个性化的交互体验。在实际开发中，这样的设计可以应用于搜索框、自动补全或者任何需要提供预设选项供...
JavaScript 文本框下拉提示，通常被称为自动补全或自动提示功能，是许多网页和应用程序中常见的一种交互设计。这种技术允许用户在输入文本时，系统根据已输入的部分内容提供匹配建议，从而提高输入效率和用户体验。...
本资源包提供了一个解决方案，它包含三个JavaScript文件和一个HTML文件，用于在前端实现C#关键字变色以及输入时的关键字提示功能，非常适合在线编译器或代码编辑器的开发。 首先，我们要理解C#是一种面向对象的编程...
《jQuery实现Autocomplete插件：文本框下拉选项详解》 在Web开发中，用户界面的交互性与易用性是提升用户体验的关键因素之一。jQuery作为一个轻量级、功能强大的JavaScript库，为开发者提供了丰富的插件，使得创建...
在本案例中，我们讨论的是一个基于jQuery实现的输入框下拉提示插件。 首先，让我们深入理解jQuery。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的核心特性包括...
本示例中，“jQuery input文本框城市下拉菜单选择代码”是关于如何使用jQuery来实现一个交互式的城市选择功能，通常用于用户在输入框中选择他们的所在城市。这种功能常见于在线表单、地址填写等场景，可以提高用户...
Google和Baidu等知名搜索引擎在搜索框的设计上，引入了一种交互性的增强功能——内容提示，也被称为自动补全或下拉提示。这种功能能够根据用户输入的关键词实时显示相关建议，提高用户的输入效率和搜索体验。本文将...
本篇文章将详细讲解如何利用jQuery实现一个输入文本框的三级联动下拉菜单功能。 首先，我们需要理解“三级联动”的概念。在网页交互中，三级联动通常指的是三个下拉菜单之间存在依赖关系，当用户在一个下拉菜单中...
标题中的“JavaScript html js页面刷新之后下拉菜单选中值不变”是一个常见的前端开发问题，涉及到浏览器缓存、页面状态保持以及JavaScript操作DOM元素的知识点。在这个场景中，开发者希望在用户选择下拉菜单的一项...
在构建火车机票或类似旅行预订网站时，"js ...总的来说，实现"js text输入框提示火车机票网站点击文本框城市选择"的功能，需要综合运用HTML、CSS和JavaScript，关注用户体验和交互设计，确保在各种设备上都能流畅运行。
在JavaScript（JS）开发中，实现“js text文本框弹出城市选择”的功能是一项常见的交互设计，常见于各种在线服务，比如订机票、酒店预订等网站。这种功能为用户提供了一个友好的界面，允许他们在输入框中点击后弹出...
Flex文本框自动提示技术是基于Adobe Flex框架的一种用户体验优化功能，它允许用户在输入文本时获得即时的下拉建议或提示。这种功能在各种应用程序中非常常见，如搜索引擎、在线表单和数据输入界面，可以显著提高用户...
1. **HTML 结构**：首先，我们需要创建一个文本框和一个用于显示提示结果的下拉列表。HTML 代码如下： ```html 请输入关键词"> ;"> ``` 2. **jQuery 事件绑定**：接下来，我们需要使用 jQuery 的 `keyup` 事件来...
本资源“文本框输入 @ 符号的输入提示的JS代码.rar”聚焦于一个特定的用户界面（UI）功能，即在文本输入框中输入特定字符（如“@”）时显示提示信息。这种功能常见于社交网络或电子邮件服务，当用户输入“@”以提及...
通常，文本框会有一个关联的下拉列表或一个浮动的div，用于显示提示内容。 6. **算法和数据结构**：为了快速匹配用户的输入并提供相关建议，需要使用一定的搜索算法，如Trie树、哈希表或者模糊匹配算法。这些算法...
综上所述，利用jQuery实现文本框自动提示是一项涉及到前端与后端协作的工作，通过监听用户输入、异步请求数据和展示下拉列表，可以显著提升用户的输入体验。在实际项目中，需要根据具体需求进行功能定制和性能优化。
JavaScript（简称JS）文本框输入内容智能提示效果是一种常见的用户界面增强技术，它可以在用户在文本框中输入内容时提供实时的建议或匹配项，提高了用户体验。这种效果通常用于搜索框、地址输入、标签添加等场景，...
- **插件源码**：实现文本框提示功能的jQuery插件源代码，可能是.js文件，可能包含配置选项和方法。 - **示例HTML**：一个简单的HTML文件，展示了如何在页面中使用该插件。 - **CSS样式**：用于定制插件外观的CSS...
在这个登录表单中，当用户点击文本框使其获得焦点时，会显示下拉提示内容。这可以通过CSS3的`:focus`伪类来实现，当输入框被选中时应用特定的样式。同时，可以使用`transition`属性来平滑地改变这些提示内容的显示和...