第一版本：

 <!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. 数值统计 AC 杭电

    数值统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. ubuntu安装aircrack-ng/reaver/minidwep-gtk用来跑pin

    按照下面安装方法,可以在Ubuntu 13.04中启动 minidwep.Tested with Ubuntu 13.04 1. Dependencies    Code:    sudo apt-g ...

  3. AE-后期制作的基本技能-小视频-实践!!

    这是本人学习AE软件的实践练习,看来,学习基本技能要慢慢来,稳步前进,一步一个脚印才对!!同时,多观看别人的作品,多看一下电视上面的片头,广告的效果;学习AE要带着问题,思路来学习!多做理论联系实际操 ...

  4. 常见MYSQL导入导出数据命令

    导出数据库: mysqldump –uuser -ppassword -hhost databasename > target_20150225.sql 打包: tar zcvf target_ ...

  5. protocol buffer和当年corba ，和现在SOA有啥异同点

    CORBA是对象管理集团(OMG)的一个标准,使得不同语言编写的,运行在不同计算机上的能够协同工作.标准包括分布式计算的通讯协议(GIOP和IIOP),可映射到多种语言的接口描述语言(IDL),对象请 ...

  6. 点击类名方法名如何连接到相应的Android源代码

    . 找到Android SDK所在路径 “D:\androidDev\android-sdk-windows\” . 在该目录下选择platforms到 “D:\androidDev\android- ...

  7. COJ 0248 HDNOIP201408生成树

    HDNOIP201408生成树 难度级别: A: 编程语言:不限:运行时间限制:5000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 输入 第一行包括两个整数V, ...

  8. Codeforces - ZeptoLab Code Rush 2015 - D. Om Nom and Necklace：字符串

    D. Om Nom and Necklace time limit per test 1 second memory limit per test 256 megabytes input standa ...

  9. .net 面试题(3)

    96.题目: 活期存款中,"储户"通过"存取款单"和"储蓄所"发生联系.假定储户包括:账号,姓名,电话,地址,存款额:"储蓄所&q ...

  10. Unity Inspector 给组件自动关联引用

    项目进入上线阶段了, 有一些地方需要总结和优化.  我发现UI一改变,我就要拖很久的UI. UI结构发生改变我还必须给一些变量设置好引用,后来我去看别人预设的时候组件拖放的变量至少10个以上, 它们一 ...