输入框提示--------百度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函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...
随机推荐
- 高性能Socket组件和RPC,让你像写本地代码一样开发网络应用和分布式程序
最近想试试C#能不能写出高性能的分布式组件,于是写了一个双工RPC,也当练手,下面是单连接的测试结果,非常给力.机器配置:U:E1230-v2,内存:ddr3-8G 1.递归调用 过程:Clie ...
- HBase笔记--编程实战
HBase总结:http://blog.csdn.net/lifuxiangcaohui/article/details/39997205 (very good) Spark使用Java读取hbas ...
- 转：CString::GetLength()获得字节数的正确方法
前段时间,做http协议上传文件及断点续传控件时,在客户端采用C++调用CHttpConnection.CHttpFile进行文件上传.移植到Unicode编码时,上传得到的文件总是小于正常文件.最终 ...
- 【转】Beaglebone Black
原文网址:http://bbs.eeworld.com.cn/thread-431409-1-1.html 开源硬件在国外火得一塌糊涂,国内却没有那么多人玩,直接导致中文论坛资料严重缺乏……但这也挡不 ...
- 浏览器开发 IE webkit chrome浏览器定制
FAQ:制作自己的浏览器有何意义?1.浏览器按照您的需求命名,可自定义LOGO,对您的产品或者公司都有推广作用.2.在帮助一栏的主页以及软件安装的网页链接都可以设为您网站的链接. 3.可将首页设置为您 ...
- java--文件过滤器和简单系统交互
一.文件过滤器 /** * @Title: getFileByFilter * @Description: 根据正则rege获取给定路径及其子路径下的文件名(注意递归的深度不要太大) * @param ...
- AddForce给物体添加刚体效果并且脚本增加一个力（按空格实现）
using UnityEngine; using System.Collections; public class CubeAddForce : MonoBehaviour { float hor,v ...
- 【IIS小技巧】将IIS Express改成可以通过ip地址访问
通过浏览器访问的是localhost,如果通过手机访问则需要用ip地址,所以要修改IIS Express的配置,允许通过ip地址访问. IIS Express的配置文件默认在C:\Users\User ...
- [React] React Router: Redirect
The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...
- iOS 画音频波形曲线 根据音频数据版
效果图 DrawView.h #import <UIKit/UIKit.h> @interface DrawView : UIView @property shortshort *draw ...