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

jQuery：自定义自动完成列表在输入更改时不会重绘自身

1 个答案: