js文本框提示和自动完成
1.模仿大型网站自动提示，就是输入“苹果”，在水果类中搜索，html代码如下：
<div id="searchTips" style="display:none;width:291px;height:auto;position:absolute;z-index:9001;">
<ul></ul>
<input type="hidden" id="hidSearchOption" />
</div>
js代码如下：
//显示搜索下拉选择项
function showTips(searchInput) {
var top = searchInput.offsetTop+32;
var left = searchInput.offsetLeft;
var width = searchInput.offsetWidth;
var ulStringFormat = "<li onclick='selectOption(this)' onmouseover='javascript:this.style.backgroundColor=\"#A9A9A9\"' onmouseout='javascript:this.style.backgroundColor=\"#666666\"' style='width:220px;height:25px;background-color: #666666;display:block;'><span style='float:left;text-indent:6px'>" + $("#searchvalue").val() + "</span><span id='{0}' style='float:right;padding-right:1px;fond-size:10px;'>{1}</span></li>";
while (searchInput = searchInput.offsetParent) {
top += searchInput.offsetTop;
left += searchInput.offsetLeft;
}
if ($("#searchvalue").val().length > 0) {
$("#searchTips").css({ "left": left + "px", "top": top + "px" }).show();
$("#searchTips>ul").empty().append(kendo.format(ulStringFormat, "sFlightNo","航班号")).append(kendo.format(ulStringFormat, "sTailNo", "机号"));
}
else {
searchInputBlur();
}
}
function fillvalue(value) {
alert($(value).find("span:first").html());
searchInputBlur();
}
function searchInputBlur() {
$("#searchTips").hide();
}
function selectOption(li) {
$("#hidSearchOption").val(($(li).find("span:last").attr("id")));
searchInputBlur();
}
//搜索
function searchContent() {
var url = "/Manager/DutyManager?BeginTime=" + getTodayBeginUTCTime() + "&EndTime=" + getTodayEndUTCTime()
var option = $("#hidSearchOption").val();
var value = $("#searchvalue").val().trim();
switch (option) {
case "sFlightNo":
url += "&FlightNo=" + value;
break;
case "sTailNo":
url += "&TailNo=" + value;
default:
}
openWindow(url);
}
效果图如下
2.带上下左右键的
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimulateUpDownKeySelect.html</title>
<style type="text/css">
#divSelect {border:1px solid red; width:208px !important;width:210px;}
#divSelect ul {width:200px;margin:3px; margin-left:-35px;*margin-left:3px;overflow:hidden}
#divSelect ul li {float:left; list-style-type:none;width:45px;height:14px;line-height:20px;font:14px arial;text-align:center;padding:2px}
#divSelect li:hover {background :green;cursor:pointer}
#txtInput {width:205px;}
</style>
</head>
<body>
<form method="post" action="##">
<input type="text" id="txtInput" value="" autocomplete="off" onkeydown="if(event.keyCode==13)return false;" />
<!--
防止回车键触发表单提交
onKeyPress
-->
<div id="divSelect">
</div>
<script type="text/javascript">
var list = "<ul>"
list += "<li>123a</li><li>战争片</li><li>动作片</li><li>爱情片</li><li>剧情片</li><li>记录片</li><li>fbac</li><li>bbca</li><li>defe</li><li>gzza</li><li>恐怖片</li><li>古装片</li><li>电视剧</li><li>读书</li><li >小说</li><li>作品集</li><li>历史</li><li>诗歌</li><li >散文</li><li>军事</li>";
list += "</ul>"
document.getElementById('divSelect').innerHTML = list;
</script>
</form>
<script type="text/javascript">
function $(sId) {
return document.getElementById(sId);
}
function clearSelectedOptBgColor(target) {
if (target.seletedIndex >= 0)
target.options[target.seletedIndex].style.background = "";
}
function setSelectedOptBgColor(target) {
target.options[target.seletedIndex].style.background = "green";
}
var upKeyCode = 38;
var downKeyCode = 40;
var enterKeyCode = 13;
var oInput = $("txtInput");
oInput.options = $("divSelect").getElementsByTagName("li");
oInput.seletedIndex = -1;
oInput.focus();
//oInput.onKeyPress{}
oInput.onkeyup = function (event) {
if (event == undefined)
event = window.event;
switch (event.keyCode) {
case 37:
clearSelectedOptBgColor(this);
this.seletedIndex--;
if (this.seletedIndex < 0)
this.seletedIndex = this.options.length - 1;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this); break;
case 38:
clearSelectedOptBgColor(this);
this.seletedIndex = this.seletedIndex - 4;
if (this.seletedIndex < 0)
this.seletedIndex = this.options.length - 1;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this); break;
case 39:
clearSelectedOptBgColor(this);
this.seletedIndex++;
if (this.seletedIndex >= this.options.length)
this.seletedIndex = 0;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case 40:
clearSelectedOptBgColor(this);
this.seletedIndex = this.seletedIndex + 4;
if (this.seletedIndex >= this.options.length)
this.seletedIndex = 0;
this.value = this.options[this.seletedIndex].innerHTML;
setSelectedOptBgColor(this);
break;
case enterKeyCode:
this.value = this.options[this.seletedIndex].innerHTML;
//alert('aa')
break;
}
};
oInput.onblur = function () {
clearSelectedOptBgColor(this);
this.seletedIndex = 1;
};
</script>
</body>
</html>
效果：
3.下面这个只带上下键提示，写的比较规范
<head>
<title></title>
<style type="text/css">
#autoCompleteWp
{
border: 1px solid #ddd;
padding: 20px;
margin: 100px auto;
width: 300px;
position: relative;
}
#datalist
{
position: absolute;
left: 0;
top: 56px;
background: #f8f8f8;
z-index: 2;
border: 1px solid #FCC;
padding: 15px;
display: none;
}
#datalist li
{
line-height: 1.6;
list-style: none;
cursor: pointer;
}
.on
{
background: #06C;
color: #fff;
}
</style>
</head>
<body>
<div id="autoCompleteWp">
请输入邮箱：<br />
<input id="autoComplete" type="text" />
<ul id="datalist">
</ul>
</div>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function () {
return function () { this.initialize.apply(this, arguments); }
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
}
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
}
//自动完成类
var autoComplete = Class.create();
autoComplete.prototype = { initialize: function (obj, databox, data) {
_this = this;
this.input = $(obj);
this.data = data;
this.index = 0;
this.datalist = $(databox).getElementsByTagName('li');
addEventHandler(this.input, 'keyup', this.writting);
},
writting: function (e) {
var e = e || window.event;
var keyCode = e.keyCode || e.charCode; //兼容ie firefox等事件 switch (keyCode) { case 38: //上
_this.index--;
if (_this.index < 0) {
_this.index = $('datalist').getElementsByTagName('li').length - 1
} if ($('datalist').getElementsByTagName('li').length > 0) { for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
$('datalist').getElementsByTagName('li')[k].className = ''
}
}
$('datalist').getElementsByTagName('li')[_this.index].className = "on";
break;
case 40:
_this.index++;
if (_this.index > $('datalist').getElementsByTagName('li').length - 1) {
_this.index = 0;
}
if ($('datalist').getElementsByTagName('li').length > 0) {
for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
$('datalist').getElementsByTagName('li')[k].className = ''
}
}
$('datalist').getElementsByTagName('li')[_this.index].className = "on"
break;
//回车
case 13:
_this.input.value = $('datalist').getElementsByTagName('li')[_this.index].innerHTML.replace(/<\/?strong>/gi, '') //获取html，正则过滤标签，只取其值
$('datalist').style.display = 'none'
break;
default:
var temp = [];
var val = _this.input.value.trim();
if (val == '') {
$('datalist').style.display = 'none'
return;
}
//如果输入字符包含\会导致正则表达式出错，转换成\\即可 [ ] 等也需要转义
if (val.indexOf('\\') != -1) {
val = val.replace(/\\/g, '\\\\')
}
var reg = new RegExp('^(' + val + ')');
//利用正则把匹配到的数据 加入数组
for (var i = 0; i < _this.data.length; i++) {
//如果匹配到
if (reg.test(_this.data[i])) {
thedata = _this.data[i].replace(reg, '<strong>$1</strong>'); //利用js正则式中replace中的占位符特性
temp.push('<li title="' + i + '">' + thedata + '</li>')
}
else {
$('datalist').style.display = 'none'
}
}
//如果匹配到数据
if (temp.length > 0) {
$('datalist').innerHTML = temp.join('');
$('datalist').style.display = 'block';
var li = $('datalist').getElementsByTagName('li');
li[0].className = "on";
_this.index = 0;
for (var i = 0; i < li.length; i++) {
li[i].onmouseover = function () {
for (var i = 0; i < li.length; i++) {
li[i].className = '';
}
this.className = 'on';
_this.index = this.getAttribute('title');
}
//鼠标点击
li[i].onclick = function () {
_this.input.value = this.innerHTML.replace(/<\/?strong>/gi, '') //获取html，正则过滤标签，只取其值
$('datalist').style.display = 'none'
}
}
}
else {
$('datalist').innerHTML = '';
}
break;
}
}
}
var data = ['yaofjaa@vip.qq.com', 'yaojaa008@163.com', 'yaojaa@yahoo.com', 'yaoj4aa@sohu.com.com', 'yaojaa@vipf.qq.com', 'yfaojaa@163.com', 'yaojfaa@sina.com', 'yaojaa@yahoo.com', 'yaojaa@sohu.com']
var auto = new autoComplete('autoComplete', 'datalist', data)
</script>
</body>
</html>
效果如下：
js文本框提示和自动完成的更多相关文章
- [js开源组件开发]js文本框计数组件
js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...
- 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果
是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...
- cognos report利用文本框提示优化日期维度
为了尽量减少手工对日期维度的维护,在日期维度表中年份已经到了2099年,把年份作为下拉框或者月份作为下拉框的时候,选择起来颇为麻烦(当然也可以在此基础之上设置默认为当前月) 如图:提示页面以及html ...
- (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题
完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- WEB文本框提示
<input type="text" placeholder="文本框提示语" name="version_no"/>
- 目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)
原文地址:http://blog.csdn.net/kunoy/article/details/8007585 本文主要解决问题: 1.区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,ext ...
- input文本框录入字母自动大写
向文本框输入文字时,如何让小写字母自动变为大写呢?有一个简单有效的做法是用CSS. <input name="t1" type="text" style= ...
- Android实现Filterable通过输入文本框实现联系人自动筛选
相信大家一定在见过手机通讯录的一个情景就是使用在选人的时候输入文本框里的数据就能自动筛选.实现的效果如下图. 其实实现这样的效果相信大家一定对另外一个控件不陌生那就AutoCompleteTextvi ...
随机推荐
- 关于iChartjs在移动端提示框tip显示不正常的解决方法
最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...
- Virtual DOM 算法
前端 virtual-dom react.js javascript 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...
- Python学习一入门
一.打印Hello和多行文本 print 打印 后跟单引号或者双引号 多行:3个单引号或者3个双引号 二.算术运算 2.1.加减乖法 默认1/2=0 如果需要小数运算,则需要一个运算术上加.或者.0 ...
- Mac OS X上安装 Ruby运行环境
环境 对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境.此安装方法同样适用于产品环境! 系统需求 ...
- IOS开发关于测试的好的网址资源
1. 高级自动化单元测试,推荐看LeanCloud 工程师的李智维的自动化单元测试的直播录影李智维的演示github 2.iOS开发-单元测试 这只是一篇简单的ios测试介绍 3.iOS单元测试 来自 ...
- android 进程/线程管理（四）----消息机制的思考（自定义消息机制）
关于android消息机制 已经写了3篇文章了,想要结束这个系列,总觉得少了点什么? 于是我就在想,android为什么要这个设计消息机制,使用消息机制是现在操作系统基本都会有的特点. 可是andro ...
- MongoDB 的 GridFS 详细分析
GridFS简介 GridFS是MongoDB中的一个内置功能,可以用于存放大量小文件. http://www.mongodb.org/display/DOCS/GridFS http://www.m ...
- Force.com平台基础
当我开始写这篇博客的时候,<Force.com Platform Fundamentals>的PDF版本我还没看到十分之一.由于PDF全部是英文的,所以我看起来比较吃力.我尝试过边看边做笔 ...
- p2p投资理财入门篇（新手必备）
在互联网金融浪潮下,如果你只知道余额宝.理财通,如果你认为宝宝们就可以代表整个互联网金融,那可真是大错特错.这些年来,P2P这股强大势力一直在互联网金融领域兴风作浪,随着被高层正名.监管升级,P2P的 ...
- Windows x86/ x64 Ring3层注入Dll总结
欢迎转载,转载请注明出处:http://www.cnblogs.com/uAreKongqi/p/6012353.html 0x00.前言 提到Dll的注入,立马能够想到的方法就有很多,比如利用远程线 ...