纠结了我一天的效果终于实现了。仿照网站的在输入内容时会有智能记忆及推荐选项显示。修复了好多没有考虑到的bug。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框提示</title>
<style>
/*去除包含datalist的input的下拉箭头*/
input::-webkit-calendar-picker-indicator{
display: none;
-webkit-appearance: none;
}
</style>
</head>
<body>
<input id = "search" list = "dl" placeholder = "请输入搜索文字" />
<datalist id = "dl"></datalist>
<input id = "btn" type="button" value = "搜索"/>
<script>
var search = document.getElementById("search");
var dl = document.getElementById("dl");
var btn = document.getElementById("btn");
var arr = [];
btn.onclick = function(){
var curval = search.value ;
var isnew = true;
// 判断供datalist显示的数组是不是为空，为空直接添加，不为空判断当前输入框中的值是否已经存在在数组中，存在不做操作，不存在将input值添加到数组
if(arr.length>0){
for(var i=0;i<arr.length;i++){
if(arr[i].indexOf(curval) >=0 ){
isnew = false;
}
}
if(isnew){
arr.push(curval);
console.log("此次添加的项为："+curval);
console.log("此时的下拉数组为："+arr);
}
}else{
arr.push(curval);
console.log(arr);
}
}
search.oninput = function(){
var curval=search.value;
var opts = dl.children;
var val = search.value;
console.log(opts);
// 判断下拉选项是否存在，如果存在的话先清空
if(opts.length>0){
dl.innerHTML = "";
console.log(dl);
}
if(arr.length>0){
for(var i=0;i<arr.length;i++){
判断数组中是否存在包含input输入框的值的项，如果存在就生成新的datalist显示项
if(arr[i].indexOf(curval) >=0 ){
var opt = document.createElement("option");
opt.value = arr[i];
dl.appendChild(opt);
}
}
}
};
</script>
</body>
</html>