输入框提示--------百度IFE前端task2
第一版本：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script> 8 <script type="text/javascript" src="js/search.js" ></script> 9 <style> 10 .choosed { 11 background-color: #ccc; 12 } 13 14 ul { 15 list-style: none; 16 } 17 18 span { 19 color: red; 20 } 21 </style> 22 <body> 23 <input /> 24 <ul></ul> 25 <script> 26 var arr = ['text','test','table','text-books','tebiekuai']; 27 28 var input = document.getElementsByTagName('input')[0]; 29 var ul = document.getElementsByTagName('ul')[0]; 30 31 input.addEventListener('input',function(){ 32 // 删除ul下所有li 33 var currNode = ul.childNodes; 34 for(var i=0,len=currNode.length; i < len; i++){ 35 ul.removeChild(currNode[0]); 36 } 37 //添加li 38 var value = input.value; 39 var result = []; 40 arr.forEach(function(item, index){ 41 if(value.length>0 && item.indexOf(value)==0){ 42 var liNode = document.createElement('li'); 43 var spanNode = document.createElement('span'); 44 spanNode.textContent = value; 45 var text = document.createTextNode(item.substring(value.length)); 46 liNode.appendChild(spanNode); 47 liNode.appendChild(text) ; 48 49 result.push(liNode); 50 } 51 }) 52 53 result.forEach(function(item, index){ 54 ul.appendChild(item); 55 }) 56 }) 57 58 input.addEventListener('keydown', function(e){ 59 var choosedNode = document.getElementsByClassName('choosed'); 60 if(e.keyCode==40){ 61 e.preventDefault(); 62 if(choosedNode.length==0){ 63 ul.childNodes[0].className = 'choosed'; 64 } else if(choosedNode[0] == ul.lastChild){ 65 66 } else { 67 68 choosedNode[0].nextSibling.className = 'choosed'; 69 choosedNode[0].className = ''; 70 } 71 } 72 if(e.keyCode==38){ 73 e.preventDefault(); 74 if(choosedNode.length==0){ 75 ul.lastChild.className = 'choosed'; 76 } else if(choosedNode[0] == ul.firstChild){ 77 choosedNode[0].className = ''; 78 } else { 79 choosedNode[0].previousSibling.className = 'choosed'; 80 choosedNode[1].className = ''; 81 } 82 } 83 if(choosedNode.length!=0 && e.keyCode == 13){ 84 e.preventDefault(); 85 input.value = choosedNode[0].textContent; 86 var currNode = ul.childNodes; 87 for(var i=0,len=currNode.length; i < len; i++){ 88 ul.removeChild(currNode[0]); 89 } 90 } 91 92 }) 93 </script> 94 </body> 95 </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); }); }, }
