0

我正在尝试获取用户输入，匹配结果，在下拉列表中显示结果，然后单击下拉列表中的名称以显示它。我已经能够使用 innerHTML 在下拉列表中显示结果，但它不可点击，所以现在我正在动态创建 Div 元素。但是，我不确定当用户按下退格键时如何清除列表。我以前是用document.getElementById('placeholder').innerHTML=""语句来做的。这是我到目前为止所做的。注释中的代码适用于我使用 innerHTML 显示下拉菜单时的代码：

HTML 代码：

<body>
  <input id="filter" type="text" placeholder="Enter your filter text here.."
   onkeyup="test()"/>

  <div id="lc">  
    <!--- <p id='placeholder'> </p>  -->
  </div>
  <script type="text/javascript" src="js/filter.js"></script>
</body>

JS代码：

 // JavaScript Document
 s1 = new String()
 var myArray = new Array();

 myArray[0] = "Donald Duck";
 myArray[1] = "Winnie Pooh";
 myArray[2] = "Komal Waseem";
 myArray[3] = "Hockey";
 myArray[4] = "Basketball";
 myArray[5] = "Shooting";
 myArray[6] = "Mickey Mouse";

 function test() {
   s1 = document.getElementById('filter').value;
   var myRegex = new RegExp((s1),"ig");
   arraysearch(myRegex);
 }

 function arraysearch(myRegex) { 
   var flag=0;

   //document.getElementById('placeholder').innerHTML=""; 
   for(i=0; i<myArray.length; i++) { 
   //if(myArray[i].charAt(0).indexOf(s1) != -1) {
     if(myArray[i].match(myRegex)) { 
       flag = 1;
       //document.getElementById('lc').style.visibility = 'visible';
       //document.getElementById('placeholder').innerHTML += myArray[i]+"<br/>";
       var element = document.createElement("div");
       element.appendChild(document.createTextNode(myArray[i]));
       document.getElementById('lc').appendChild(element);
     }
   //}

   if (flag == 0) {
     document.getElementById('lc').style.visibility='hidden';
   }
 }
4

0 回答 0