输入框提示--------百度IFE前端task2
2024-10-20 08:33:42
第一版本：
<!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);
});
},
}
最新文章
- 进制转换（ C++字符数组 ）
- JStorm之Nimbus简介
- zju(9)LCD显示实验
- iOS 解惑
- SharePoint 2013 中代码创建列表查阅项字段
- js验证表单大全
- java web项目中classes文件夹下的class和WEB-INF/lib中jar里的class文件加载顺序
- java13 InputStream，Reader
- java读取配置文件
- javascript入门基础知识
- Struts2学习笔记①
- springboot配置swagger2
- ASP.NET C# 连接 Oracle数据库增删改查，事务
- zoj 2524 并查集裸
- SPOJ1811 LCS - Longest Common Substring(后缀自动机)
- Buffer学习笔记.
- 使用PowerDesigner生成SQL语句
- Android异步任务处理框架AsyncTask源代码分析
- CSS3多列布局
- 命令行下class redis not found 解决