我按您的要求修改代码后,运行时报错,原来我的程序是在input输入框里输入数字或文字能搜索到下拉菜单里的内容,现在已输入就报错,下拉菜单边框也隐藏不了,麻烦你仔细看看我原来写的代码,再给我建议好吗,
```javascript
<style type="text/css">
.table1{
width: 1000px;
margin: 60px auto;
border-collapse: collapse;
}
.itemtdkm{
width: 210px;
height: 62px;
margin: 0px;
padding: 0px;
}
#charudivinput{
display: none;
position: absolute;
z-index: 1;
}
#charudivbiaotou{
display: none;
position: absolute;
width: 240px;
height: 25px;
z-index: 4;
margin-top: 67px;
border-top-style: none;
}
#charudivbiaoti{
display: none;
position: absolute;
width: 240px;
overflow-y: scroll;
z-index: 2;
margin-top: 92px;
}
#charudiva{
position:fixed;
text-align: center;
height: 25px;
width: 240px;
z-index: 3;
}
</style>
<div id="blue" class="jzpzdiv" ></div>
<script language="javascript">
init();
function init(){
jzpzTable(4, 6);
initjzpz();
}
function jzpzTable(rowsLength, colLength){
var position = document.getElementById("blue");//定义table生成的位置
var objTable = document.createElement("table");
objTable.className = 'table1';
objTable.id = 'table1';
objdiv = document.createElement("div");
objdiv.className = 'cjdiv';
for(var i= 0; i < rowsLength; i++){
var objTr = document.createElement("tr");
objTr.className = "itemtr";
tdLength = 5
for(var j= 0; j < colLength - tdLength; j++){
var objTd = document.createElement("td");
objTd.id = "add";
objTd.className = 'itemtdkm';
objTd.style.border = '1px solid black';
objTd.innerHTML ="<div id='charudivinput'>"
+'<input autocomplete="off" type="text" id="myInput" onkeyup="myFunction()" oninput="handleInput(event)" placeholder="搜索... " class="jzpzinput1">'
+ "</div>"+"<div id='charudivbiaotou'>"+'<table id="tab" >'
+ '<tr class="tr1">'
+'<td class="quanbu" style="width: 48px;">全部</td>'
+'<td class="zichan" style="width: 48px;">资产</td>'
+'<td class="fuzhai" style="width: 48px; ">负债</td>'
+'<td class="quanyi" style="width: 48px;">权益</td>'
+'<td class="chengben" style="width: 48px;">成本</td>'
+'<td class="sunyi" style="width: 48px;">损益</td>'+
'</tr>'+'</table>'+"</div>"+"<div id='charudivbiaoti'>"+'<table id="tab1">'
+'<tr class="tr1">'
+'<td style="font-size: 14px; ">1001库存现金</td>'
+'</tr>'
+'<tr class="tr1">'
+'<td style="font-size: 14px; ">100201农行</td>'
+'</tr>'
+'<tr class="tr1">'
+'<td style="font-size: 14px; ">1012其他货币资金</td>'
+'</tr>'
+'<tr class="tr1">'
+'<td style="font-size: 14px; ">1001</td>'
+'</tr>'
+'<tr class="tr1">'
+'<td style="font-size: 14px; ">1001</td>'
+'</tr>'+'</table>'+"<div id='charudiva'>"+'<a href="javascript:;" id="charua">点击添加</a>'+"</div>"+"</div>";
objTr.appendChild(objTd);
}
objdiv.appendChild(objTr);
objdiv1 = document.createElement("div");
}
objTable.appendChild(objdiv);
position.appendChild(objTable);
console.log(position);
}
function initjzpz(){
const table1 = document.getElementsByClassName('table1')[0]
getitemtdkms = table1.getElementsByClassName('itemtdkm')
function jzpzkm(){
for(let y = 0; y < getitemtdkms.length; y++){
getitemtdkm = getitemtdkms[y];
getitemtdkm.addEventListener('click',function(){
const _self = this;
charudivinput = this.children[0]
oinput = this.children[0].children[0]
charudivbiaotou = this.children[1]
charudivbiaoti = this.children[2]
charudivbiaotitab = this.children[2].children[0]
charudiva = this.children[2].children[1]
charudivinput.style.display = "block";
charudivbiaotou.style.display = "block"
charudivbiaoti.style.display = "block"
oinput.style.width = "204px";
oinput.style.height = "62px";
charudivbiaotitab.style.maxHeight = "180px"
charudivbiaotitab.style.display = "block"
charudivbiaotou.style.border = "1px solid red"
charudivbiaotou.style.backgroundColor = "white"
charudivbiaoti.style.border = "1px solid red"
charudivbiaoti.style.backgroundColor = "white"
charudiva.style.border = "1px solid red"
charudiva.style.backgroundColor = "white"
function cell(){
rows = charudivbiaoti.getElementsByTagName('tr');
for(i = 0; i < rows.length; i++){
for(j=0; j<rows[i].cells.length; j++){
rows[i].cells[j].onclick = function(){
oinput.value = this.innerHTML;
charudivbiaotou.style.border = "none"
charudivbiaotou.innerHTML = ""
charudivbiaotou.style.backgroundColor = ""
charudivbiaoti.style.border = "none"
charudivbiaotitab.innerHTML = ""
charudivbiaoti.style.backgroundColor = ""
charudiva.style.border = "none"
charudiva.innerHTML = ""
charudiva.style.backgroundColor = ""
_self.style.border = "none"
}
}
}
}
cell();
})
getitemtdkm.onmouseout = function(){
this.children[0].children[0].placeholder = "";
}
}
}
jzpzkm();
}
function myFunction(){
let table1 = document.getElementsByClassName('table1')[0]
getitemtdkms = table1.getElementsByClassName('itemtdkm')
for(var y = 0; y < getitemtdkms.length; y++){
getitemtdkm = getitemtdkms[y];
oinput = getitemtdkm.children[0].children[0];
tab1 = getitemtdkm.children[2].children[0];
var oinput, filter, table, tr, td, i;
filter = oinput.value.toUpperCase();
tr = tab1.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
function handleInput(event){
let table1 = document.getElementsByClassName('table1')[0]
getitemtdkms = table1.getElementsByClassName('itemtdkm')
for(var y = 0; y < getitemtdkms.length; y++){
getitemtdkm = getitemtdkms[y];
charudivbiaotitab = getitemtdkm.children[2].children[0];
const oinput = event.target;
if(oinput.value){
charudivbiaotitab.style.height =""
charudivbiaotitab.style.maxHeight = "180px"
}else {
charudivbiaotitab.style.maxHeight = "180px"
charudivbiaotitab.style.display ="block"
}
}
}
```