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>");
            }
        }
    }

问候， 你