Очистка автоматического завершения поиска и добавления значения

Я сделал автозаполнение таким образом, что при нажатии на выбранный результат он добавляется к 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;
    });
});

1 ответ

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