第一版本：

 <!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的更多相关文章

  1. 深度克隆（对象、数组）--------百度IFE前端task2

    var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" }}; co ...

  2. 个人待办事项工具的设计和搭建（IFE前端2015春季 任务3）

    这是我几个月之前的项目作品,花了相当的时间去完善.博客人气不高,但拿代码的人不少,所以一直处于保密状态.没有公开代码.但如果对你有帮助,并能提出指导意见的,我将十分感谢. IFE前端2015春季 任务 ...

  3. jQuery Label Better – 友好的表单输入框提示插件

    jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...

  4. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  5. h5输入框提示语 + 正常文本框提示语

    <input id="username" name="username" type="text" placeholder=" ...

  6. 百度Web前端面试经历

    今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官 ...

  7. 『个人の笔记』百度ife

    ✄--------------------------------------------task1分割线--------------------------------------------✄ 百 ...

  8. 小问题总结：鼠标点击到输入框（input）里的时候，输入框的提示消失，鼠标再移开，输入框提示出现

    问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示:   做法如下: <input type="text" name ...

  9. # IFE前端（2015春）-task2

    第一章 JavaScript数据类型及语言基础 期望达成 掌握JavaScript的各种数据类型概念.判断方法 掌握JavaScript函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...

随机推荐

  1. 11061160顾泽鹏homework-01

    我的Github地址是buaa11061160 教材:中文版 代码大全 (第二版) 斯蒂夫·迈克康奈尔 设计思路: 输入了一串数组a[0].a[1]..... 从a[0]开始向后扫,在以数字a[i]结 ...

  2. Microsoft OLE DB Provider for SQL Server 错误 '80040e21'

    我的是因为数据库满了,正在向服务商申请增加数据库容量 原文地址:Microsoft OLE DB Provider for SQL Server 错误 '800作者:欧阳IT记事本 昨天打开网站还正常 ...

  3. 单/多行文本添加省略号 (oﾟωﾟo)

    1.单行文本添加省略号 一般用于新闻列表展示 li{ width: 200px; height: 30px; line-height: 30px; cursor: pointer; list-styl ...

  4. 一个简单LINUX程序的逆向

    开始之前的准备: 反汇编:IDA 十六进制编辑器: Hexworkshop LINUX环境: KALI LINUX 调试: EDB (KALI自带的) 一个简单的动态追码, 大牛们就略过吧…… 用16 ...

  5. Android菜单详解（一）——理解android中的Menu

    前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至 ...

  6. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  7. ubuntu下编译时遇到的错误及解决方式

    1.错误展示: hangma@ubuntu:~/test/test/protest/stack_test$ gcc  -c my_stack.c -o my_stack.o In file inclu ...

  8. 设计模式（九）：Composite组合模式 -- 结构型模式

    1. 概述 在数据结构里面,树结构是很重要,我们可以把树的结构应用到设计模式里面. 例子1:就是多级树形菜单. 例子2:文件和文件夹目录 2.问题 我们可以使用简单的对象组合成复杂的对象,而这个复杂对 ...

  9. 黑马程序员_Java集合框架

    集合类 1,为什么出现集合类? 面向对象语言对食物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 2,数组和集合类同是容器,有何不同? 数组 ...

  10. HDU_2048——全错位排列递推公式

    Problem Description HDU 2006'10 ACM contest的颁奖晚会隆重开始了! 为了活跃气氛,组织者举行了一个别开生面.奖品丰厚的抽奖活动,这个活动的具体要求是这样的:首 ...