当用户删除javascript中的输入时删除div_Javascript_Dom_Html_Createelement

当用户删除javascript中的输入时删除div

javascript dom html

当用户删除javascript中的输入时删除div,javascript,dom,html,createelement,Javascript,Dom,Html,Createelement,我试图获取用户输入，匹配结果，在下拉列表中显示结果，然后从下拉列表中单击一个名称来显示它。我已经能够使用innerHTML在下拉列表中显示结果，但它不可单击，所以现在我正在动态创建Div元素。但是，我不知道当用户按backspace时如何清除列表。我以前是用document.getElementById（'placeholder'）.innerHTML=“语句来做这件事的。这是我到目前为止所做的。comments中的代码用于我使用innerHTML显示下拉菜单时的代码： HTML代码： <

我试图获取用户输入，匹配结果，在下拉列表中显示结果，然后从下拉列表中单击一个名称来显示它。我已经能够使用innerHTML在下拉列表中显示结果，但它不可单击，所以现在我正在动态创建Div元素。但是，我不知道当用户按backspace时如何清除列表。我以前是用document.getElementById（'placeholder'）.innerHTML=“语句来做这件事的。这是我到目前为止所做的。comments中的代码用于我使用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';
   }
 }

//JavaScript文档
s1=新字符串（）
var myArray=新数组（）；
myArray[0]=“唐老鸭”；
myArray[1]=“小熊维尼”；
myArray[2]=“Komal Waseem”；
myArray[3]=“曲棍球”；
myArray[4]=“篮球”；
myArray[5]=“射击”；
myArray[6]=“米老鼠”；
功能测试（）{
s1=document.getElementById（'filter'）。值；
var myRegex=新的RegExp（（s1），“ig”）；
arraysearch（myRegex）；
}
函数数组搜索（myRegex）{
var标志=0；
//document.getElementById（'占位符'）.innerHTML=“”；
对于（i=0；ii如果您不确定，为什么不使用现有的自动完成解决方案？web上有很多可用的解决方案。对jquery不感兴趣？可以让您的生活更轻松……是的，我已经看过jquery插件和解决方案，但希望通过javascript实现这一点。@KomalWaseem:如果元素从传递给innerHTML
的字符串创建。否则，只需分配元素的onclick
属性即可。