第一版本：

 <!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. java IO和NIO的场景选择

    就使用上来说,传统的面向流的IO更简单,而面向缓冲(块)的NIO更复杂,因为可调整空间大,接口的概念性也更加低层(原生)些. 下面说说使用场景: IO的场景: 1.文件可能很多,但是size并不是那么 ...

  2. Basefragment的封装使用

    1.前言 封装作为面向对象的三大特性之一,在我们平时的coding过程用的那是非常的多的.大多数时候,我们可以根据封装情况评判代码的质量水平. 本文主要讲解的是fragment的封装.大体上,在项目的 ...

  3. HDU_1230——火星A+B,加法进制问题

    Problem Description 读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的,第n位的进制就是第n个素数.例如:地球上的10进制数2,在火星上 ...

  4. Bozo排序

    Bogo的变种,继续卖萌... Bogo每次都随机打乱数组,而Bozo每次随机选择两个位置,然后交换这两个位置的值.相同的是不断靠概率不断查看有序了没... public static void bo ...

  5. canvas生成遮罩图片

         首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩.        它的使用方式也不复杂,和background使用方式差不多.使用mask-image就 ...

  6. less.css基础学习，陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

  7. 百度之星资格赛 hdu 4826 Labyrinth 动态规划

    /********************* Problem Description 是一仅仅喜欢探险的熊.一次偶然落进了一个m*n矩阵的迷宫,该迷宫仅仅能从矩阵左上角第一个方格開始走,仅仅有走到右上 ...

  8. Ajax原生XHR对象

    前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象.   ...

  9. Json格式的http请求

    服务端PHP代码可以从这里下载:https://github.com/lornajane/PHP-Web-Services 1.使用volley实现: request要用JsonObjectReque ...

  10. hdu 2032

    水题 AC代码: #include <stdio.h> int main() { int a[31][31]; int i,j,n; a[1][1]=a[2][1]=a[2][2]=1; ...