Text zum Eingabefeld hinzufügen (und den aktuellen Text immer ersetzen)

Question

Ich brauche deine Hilfe.

Ich habe eine versteckte Liste zu einem Eingabesuchfeld hinzugefügt. Die Liste öffnet sich, wenn Sie in das Eingabefeld klicken und schließt sich, wenn Sie irgendwo auf den Körper klicken. Ich möchte jetzt den Text der Liste zum Eingabeformular hinzufügen, wenn Sie darauf klicken. Das bedeutet, dass der gesamte Text, der sich gerade im Eingabefeld befindet, durch den neuen Text aus der Liste ersetzt wird. Wenn Sie zum Beispiel auf "Montego Bay" klicken, wird es zum Eingabefeld hinzugefügt und ersetzt auch den aktuellen Text in diesem Feld.

Das Eingabefeld:

<input required id="HotelsPlacesEan" name="city" type="search" class="form input-lg RTL search-location deleteoutline" placeholder="Test" value="<?php echo $themeData->selectedCity; ?>" required /> 

Die Liste:

<div class="suggest-div"> 
     <span class="suggest-content hiddd"> 
      <ul class="liststyle"> 
       <li class="whylist"><b>Popular Destinations</b></li> 
       <li class="suggest"><a class="selectlink" href="">Montego Bay</a></li> 
       <li class="suggest"><a class="selectlink" href="">Negril</a></li> 
       <li class="suggest"><a class="selectlink" href="">Ocho Rios</a></li> 
       <li class="suggest"><a class="selectlink" href="">Kingston</a></li> 
       <li class="suggest" style="border-bottom:0px;"><a class="selectlink" href="">Port Antonio</a></li> 
      </ul> 
     </span> 
     </div> 

Mein aktueller Javascript (nicht ideal, ich weiß)

<script type="text/javascript"> 

$(".opensuggest").click(function() { 
    $(".suggest-content").toggleClass("hiddd"); 
    $("body").click(function() { 
     $(".suggest-content").addClass("hiddd"); 
    }); 
}); 

</script> 

Aktuelle CSS:

<style> 

a.selectlink { 
    padding-left: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: block; 
} 

a.selectlink:hover { 
    color: #fff; 
} 

ul.liststyle { 
    margin-top: 0px; 
} 

li.whylist { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    background-color: #ddd; 
    color: #000; 
    padding-left: 10px; 
    font-size: 15px; 
    font-weight: 100; 

} 

li.suggest { 
    border-bottom: 1px solid #ddd; 
    font-size: 15px; 
    font-weight: 100; 
} 

li.suggest:hover { 
    background-color: #515B62; 
    color: #fff; 
} 

.suggest-div { 
    position: absolute; 
    width: 100%; 
} 

span.suggest-content { 
    display: block; 
    background-color: #fff!important; 
    margin-top: 0px; 
    line-height: 1.2; 
    position: absolute; 
    width: 100%; 
    z-index: 999; 

} 

.hiddd { 
    display: none!important; 
} 

.form {font-weight: 100!important;} 
</style> 

Ich würde Ihre Hilfe sehr schätzen, gab mein Bestes.