输入框提示--------百度IFE前端task2
第一版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/search.js" ></script>
<style>
.choosed {
background-color: #ccc;
} ul {
list-style: none;
} span {
color: red;
}
</style>
<body>
<input />
<ul></ul>
<script>
var arr = ['text','test','table','text-books','tebiekuai']; var input = document.getElementsByTagName('input')[0];
var ul = document.getElementsByTagName('ul')[0]; input.addEventListener('input',function(){
// 删除ul下所有li
var currNode = ul.childNodes;
for(var i=0,len=currNode.length; i < len; i++){
ul.removeChild(currNode[0]);
}
//添加li
var value = input.value;
var result = [];
arr.forEach(function(item, index){
if(value.length>0 && item.indexOf(value)==0){
var liNode = document.createElement('li');
var spanNode = document.createElement('span');
spanNode.textContent = value;
var text = document.createTextNode(item.substring(value.length));
liNode.appendChild(spanNode);
liNode.appendChild(text) ; result.push(liNode);
}
}) result.forEach(function(item, index){
ul.appendChild(item);
})
}) input.addEventListener('keydown', function(e){
var choosedNode = document.getElementsByClassName('choosed');
if(e.keyCode==40){
e.preventDefault();
if(choosedNode.length==0){
ul.childNodes[0].className = 'choosed';
} else if(choosedNode[0] == ul.lastChild){ } else { choosedNode[0].nextSibling.className = 'choosed';
choosedNode[0].className = '';
}
}
if(e.keyCode==38){
e.preventDefault();
if(choosedNode.length==0){
ul.lastChild.className = 'choosed';
} else if(choosedNode[0] == ul.firstChild){
choosedNode[0].className = '';
} else {
choosedNode[0].previousSibling.className = 'choosed';
choosedNode[1].className = '';
}
}
if(choosedNode.length!=0 && e.keyCode == 13){
e.preventDefault();
input.value = choosedNode[0].textContent;
var currNode = ul.childNodes;
for(var i=0,len=currNode.length; i < len; i++){
ul.removeChild(currNode[0]);
}
} })
</script>
</body>
</html>
第二版本（jquery、对象):
function Search(obj) {
this.$search = $('#'+obj.inputId);
this.$ul = this.init(this.$search);
var array = ['task','text','text-area'];
this.setData(array);
}
Search.prototype = {
init: function(){
var that = this;
this.$search.after('<ul></ul>');
// 绑定按钮
this.$search.keydown(function(e){
this.$choosed = $('.choosed');
// 按键 ↓
if(e.keyCode == 40){
e.preventDefault();
// 没有选择
if(this.$choosed.length == 0){
$('ul li:first').addClass('choosed');
} else if(this.$choosed[0] == $('ul li:last')[0]){
} else {
this.$choosed.removeClass('choosed');
this.$choosed.next().addClass('choosed');
}
}
// 按键↑
if(e.keyCode == 38){
e.preventDefault();
if(this.$choosed.length == 0){
$('ul li:last').addClass('choosed');
} else if(this.$choosed[0] == $('ul li:first')[0]){
$('ul li:first').removeClass('choosed');
} else {
this.$choosed.removeClass('choosed');
this.$choosed.prev().addClass('choosed');
}
}
// 按键回车
if(this.$choosed.length!=0 && e.keyCode == 13){
e.preventDefault();
// 所选内容
that.$search.val(this.$choosed.text());
// 移除ul下li
that.$ul.find('li').remove();
}
})
return $('input+ul');
},
setData: function(arr){
var that = this;
that.$search.bind('input propertychange', function(){
// 获得输入内容
var value = $(this).val();
// 删除ul下所有li
that.$ul.find('li').remove();
// 要添加的li
var result = '';
$.each(arr, function(index, item) {
if(value.length>0 && item.indexOf(value)==0){
result += '<li><span>'+value+'</span>'+item.substring(value.length)+'</li>';
}
});
that.$ul.append(result);
});
},
}
输入框提示--------百度IFE前端task2的更多相关文章
- 深度克隆（对象、数组）--------百度IFE前端task2
var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" }}; co ...
- 个人待办事项工具的设计和搭建（IFE前端2015春季 任务3）
这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...
- jQuery Label Better – 友好的表单输入框提示插件
jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...
- h5输入框提示语 + 正常文本框提示语
<input id="username" name="username" type="text" placeholder=" ...
- 百度Web前端面试经历
今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官 ...
- 『个人の笔记』百度ife
✄--------------------------------------------task1分割线--------------------------------------------✄ 百 ...
- 小问题总结：鼠标点击到输入框（input）里的时候，输入框的提示消失，鼠标再移开，输入框提示出现
问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下: <input type="text" name ...
- # IFE前端（2015春）-task2
第一章 JavaScript数据类型及语言基础 期望达成 掌握JavaScript的各种数据类型概念.判断方法 掌握JavaScript函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...
随机推荐
- Python----Tornado安装
Tornado安装,环境准备: 1.python安装包及安装 2.Tornado安装包 Python包安装 Linux下安装 如果使用的是 Linux系统 或 Mac OS X ,系 ...
- Cocos2d-x 使用物理引擎进行碰撞检测
[转自]: http://blog.csdn.net/cbbbc/article/details/38541099 通常在游戏简单逻辑判断和模拟真实的物理世界时,我们只需要在定时器中判断游戏中各个精灵 ...
- Filter及FilterChain的使用详解
原文地址:http://blog.csdn.net/zhaozheng7758/article/details/6105749 一.Filter的介绍及使用 什么是过滤器? 与Servlet相似,过滤 ...
- 为什么c程序里一定要写main函数
一. 学习过程 编写程序f.c: 对其进行编译,正常通过,再对其进行连接,出现错误: 显示的出错信息为: 翻译成中文是:在c0s模块没有定义符号’_main’. 那么这个错误信息可能与文件c0s.ob ...
- 一句话输出网站404页面，REFER及相关排序
cat www.log|awk '$9~/404/ {print $7"," $11}'|sort|uniq -c|sort -nr > ./www404.csv
- Gridview中奇偶数行颜色设置
在gridview中的RowDataBound事件里面写 switch (e.Row.RowType) {case DataControlRowType.Header: e.Row.BackColor ...
- Altium Designer中使用差分对布线
Contents Language 在原理图中定义差分对 在PCB中查看和管理差分对 在PCB中定义差分对 适用的设计规则 设置设计规则的辖域 使用差分对向导定义规则 差分对布线 包括管脚交换的FPG ...
- VCRedist.exe静默安装方法(转)
INNO setup 制作安装包 的时候,发布VC++运行时 [Run]Filename: {app}vcredist_x86.exe; Parameters: /q; WorkingDir: {t ...
- sqlserver的rownum
oracle: select rownum from department sqlserver: select row_number() over (order by id) from dep ...
- delphi客户端调服务器端的java webservice如何在参数中传对象？ 转
我试过java返回一个对象到delphi端没问题,可反过来,delphi通过参数传一个对象到java,java端得到的对象值变为空,不知道是不是delphi这边设置或者对象注册方面有问题,究竟该怎么解 ...