输入框提示--------百度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函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...
随机推荐
- twisted(2)--聊天系统
我们今天要做一个聊天系统,这样可以和我们之前flask api那系列文章结合起来:其次,聊天系统最能代表tcpserver,以后可以套用各种模型,比如我们公司做的物联网,其实就是把聊天系统简化一下. ...
- Python学习笔记整理(十)Python的if测试
if语句是选取要执行的操作. 一.if语句 1.通用格式 形式是if测试,后面跟着一个或多个可选的elif(else if)测试,以及一个最终选用的else块.测试和else部分可以结合嵌套语句块,缩 ...
- 可选头 IMAGE_OPTIONAL_HEADER
//IMAGE_OPTIONAL_HEADER结构(可选映像头) typedef struct _IMAGE_OPTIONAL_HEADER { // // Standard fields. // W ...
- static变量的使用
静态变量 类型说明符是static. 静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在静态存储区内分配存储单元),该区域中的数据在整个程序的运行期间一直占用这些存储空间(在程序整个运行期间 ...
- 基于verilog的FPGA编程经验总结(XILINX ISE工具)
1.用ISE仿真的时候.所用变量一定要初始化. ISE默认初始量为"XXXXX", 而Quarters是默认为"00000"的, 其实实际上, 下到FPGA里后 ...
- 用彩虹表破解MD5、LM Hash等复杂加密密码
http://zhaoxiaobu.blog.51cto.com/878176/461016/
- MCS-51单片机内部结构
8051是MCS-51系列单片机的典型产品,我们以这一代表性的机型进行系统的讲解. 8051单片机包含中央处理器.程序存储器(ROM).数据存储器(RAM).定时/计数器.并行接口.串行接口和中断系统 ...
- 【转】listView中，checkBox的显示和隐藏
原文网址:http://www.cnblogs.com/vicma/p/3460500.html 在listView中,每个item都有一个ChexBox,当显示的时候在listView外面设置一个按 ...
- HDOJ(HDU) 1563 Find your present!(异或)
Problem Description In the new year party, everybody will get a "special present".Now it's ...
- DLL模块：extern "C"的简单解析
1.揭密extern "C" extern "C"包含双重含义,从字面上即可得到:首先,被它修饰的目标是 "extern”的:其次,被它修饰的目标是 ...