自動完了検索のクリアと値の追加

Question

私は選択した結果をクリックするとdivに追加されるような自動補完を行っています。

image when picking a vehicle

しかし、ときに私はそのポップアップから移動し、それに戻ります。検索を行い、私が望む結果をクリックすると、次のイメージのように2つ目の値を空に追加して2つの値を追加します。私はこれを防ぐにはどうすればよい

the second image with a blank value

？以下に示すように

私のコードは次のとおりです。

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