输入框提示--------百度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函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...
随机推荐
- 魔法方法：算术运算 - 零基础入门学习Python042
魔法方法:算术运算 让编程改变世界 Change the world by program 我现在重新提一个名词:工厂函数,不知道大家还有没有印象?我们在老早前就提到过Ta,由于那时候我们还没有学习类 ...
- d008: 求两数的整数商 和 商
内容: 求两数的整数商 和 商 ,商保留两位小数 输入说明: 一行 两个整数 输出说明: 一行,一个整数,一个实数(两位小数) 输入样例: 12 8 输出样例 : 1 1.50 #include ...
- PHP开发环境设置
步骤有三个: Apache 服务器安装.PHP 安装和让 Apache 支持 PHP 1. Apache 服务器的安装与配置 基于Windows操作系统支持的PHP开发的服务器有IIS和Apache, ...
- HTML5最佳实践
首先先给大家推荐个不错的 前端 网站:http://www.tystudio.net HTML5正迅速称为web前端开发技术标准,作为一名前段开发人员,了解并正确的使用HTML5制作网站变得越来越重要 ...
- 递归目录的shell脚本
#! /bin/sh # 在其他目录运行时一定要加上这样的语句 # 尤其是配置在crontab里自动运行 cd `` #定义数据别名 alias statdb="/usr/local/mys ...
- Qt中如何固定窗口的大小?
这个是从网上转载过来的,我第一次看到的在如下网页:http://blog.csdn.net/cgb0210/article/details/5712980 这里我记录一下,留以后查阅. 一种方法是设 ...
- VLC测试IPv4 IGMP/IPv6 MLD协议
1 简述 VLC既可以充当流客户端,又可以充当流服务器,并且可以跨平台使用,是一款开源.免费的软件,基于GNU GPL许可证. 2 搭建组播服务器 第一步:运行程序后选择“媒体 串流”:第二步:通过 ...
- sqlserver的rownum
oracle: select rownum from department sqlserver: select row_number() over (order by id) from dep ...
- rnqoj-28-合唱队形-最长上升子序列
想当年大一的时候,一个最长上升子序列的问题使得我的罚时上升了不少....当年还是图样啊 这道题目本质就是求最长上升子序列 #include<stdio.h> #include<str ...
- Delphi 在使用exports中的方法 带参数的用法
最近项目中,需要在一个bpl中调用另一个bpl中的单元的方法, 方法如下: 在被调用的单元中定义: procedure Inner_Ex(VoucherType: TVoucherType); exp ...