jQuery：自定义自动完成列表在输入变化时不会自行重绘

Question

我已经编写了一个基本自动完成功能，它接收一组数据并将其显示在搜索栏下方。当用户输入单个字符时，一切正常 - 列表显示匹配，并且单击列表中的项目会取消列表并将单击的项目添加到搜索栏。但是，如果有人想用多个字符更改/优化搜索值，我注意到发生了一些情况：

1.该函数将绘制<ul>结果列表的其他副本（使用新值），而不是重绘原始列表。

2.单击列表中的目标<li>不会关闭列表。

只要检测到keyup，就会调用该函数。 filterAutocomplete接受相应搜索栏的输入并获取一系列项目传递给我的主函数doAutocomplete。

$(document).ready(function(){ 
    $("#projectIDFrom").on('keyup', (function(){ 
      var val = $(this).val().trim(); 
      val = val.replace(/\s+/g, ''); 
      var id = $("#projectIDFrom").attr('id'); 
      filterAutoComplete(val, id); 
      } 

     ));  
}) 

以下是主要功能。

function doAutocomplete(list, storeInput){ 
    var query = $("#"+storeInput).val() 
    var drew = false; 
    //assign unique ID to results (handles multiple search bars on a page) 
    var resID = storeInput+ "Res"; 

     //Build the box only if there's a value greater than 0 
     //in the target search bar 
     if($("#"+storeInput).val().length > 0){ 

       //Case insensitive search for our array 
       var results = $.grep(list, function(item){ 
        return item.search(RegExp(query, "i")) != -1; 
       }); 

      //First search (no pre-existing list) 
      if(drew == false){ 
       //Create list for results 
       $("#"+storeInput).after("<ul class='autoResult' id='"+ resID +"'></ul>"); 

       //Prevent redrawing/binding of list 
       drew = true; 

       //Bind click event to list elements in results 
       $("#"+resID).on("click", "li", function(){ 
        $("#"+storeInput).val($(this).text()); 
        $("#"+resID).remove(); 
       }); 
      } 
      //remove if the value in search bar changes 
      //redraw occurs on next keypress 
      else if (drew == true){ 
       $("#"+resID).remove(); 
      } 

      //Add matching results to the list 
      for(var i = 0; i < results.length; i++){ 
       $("#"+resID).append("<li>" + results[i] + "</li>"); 
      } 
     } 
     //Handle backspace/delete so results don't remain 
     else if($("#"+storeInput).val().length < 1){ 
      $("#"+resID).remove(); 
     } 
} 

我怎样才能避免得出结果列表中的多个副本，并获得功能简单地画/重绘新成果一个列表？

Link to JSFiddle that reproduces the issues I outlined above.

任何帮助是极大的赞赏。

Answer 1

尝试在开始构建框之前放置删除代码。以下是代码。看到jsfiddle

function doAutocomplete(list, storeInput) { 
     var query = $("#" + storeInput).val() 
     var resID = storeInput + "Res"; //projectIDFromRes 
     $("#" + resID).remove(); 
     //Build the box only if it there's actually a value greater than 0 in the target search bar 
     if ($("#" + storeInput).val().length > 0) { 

      //Case insensitive search for our array 
      var results = $.grep(list, function (item) { 
       return item.search(RegExp(query, "i")) != -1; 
      }); 
      //First search 

      //Create list for results 
      $("#" + storeInput).after("<ul class='autoResult' id='" + resID + "'></ul>"); 

      //Prevent redrawing/binding of list 


      //Bind click event to list elements in results 
      $("#" + resID).on("click", "li", function() { 
       $("#" + storeInput).val($(this).text()); 
       $("#" + resID).remove(); 
      }); 

      //Add results to the list 
      for (var i = 0; i < results.length; i++) { 
       $("#" + resID).append("<li>" + results[i] + "</li>"); 
      } 
     } 
    } 

问候， Yeou