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