Question

我已完成自动完成功能，当我点击所选结果时，它会附加到div。

但是当我离开那个弹出窗口并返回它时。当我进行搜索并单击我想要的结果时，它会一次追加两个值，第二个值为空，如下图所示。

如何防止这种情况发生？

我的代码如下所示：

 $(function(){
    $(".search1").keyup(function() { 
    var searchid = $(this).val();
    var dataString = 'search='+ searchid;
    if(searchid!=''){
        $.ajax({
            type: "POST",
            url: "assets/ajax/search1.php",
            data: dataString,
            cache: false,
            success: function(html){
                $(".resultgeter").html(html).show();
            }
        });
    }return false;    
    });

    $(document).on('click', ".showing" , function() {
        var vhlid = $(this).html();
        $(".searchid").append('<div class="choice"><div class="pickVehicle">'+vhlid+'</div><div class="select2-search-choice-close"></div></div>');
        $(this).html("");
        this.html = "";
        $(this).remove();
        $(".resultgeter").fadeOut();
        return false;
    });
    $('.search1').click(function(){
        $(".resultgeter").fadeIn();
        return false;
    });
});

Answer 1

我不知道真正的解决办法，但一招可能会奏效添加if语句以确保在追加时vhlid不为空。

$(document).on('click', ".showing" , function() {
    var vhlid = $(this).html();
    if(vhlid!=" " || vhlid.length>1) {
        $(".searchid").append('<div class="choice"><div class="pickVehicle">'+vhlid+'</div><div class="select2-search-choice-close"></div></div>');
    }
    $(this).html("");
    this.html = "";
    $(this).remove();
    $(".resultgeter").fadeOut();
    return false;
});

清除自动完成搜索和附加值

1 个答案: