添加文本到输入字段（并始终替换当前文本）

Question

我需要你的帮助。

我向输入搜索字段添加了一个隐藏列表。当您单击输入字段时会打开列表，并在您单击主体上的任何位置时关闭。我现在想在列表中点击时将列表的文本添加到输入表单中。这意味着当前输入字段中的所有文本将被列表中的新文本替换。例如，如果您单击“蒙特哥贝”，它将被添加到输入字段中，并替换该字段中的当前文本。

输入字段：

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

名单：

<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> 

我目前的JavaScript（不理想，我知道）

<script type="text/javascript"> 

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

</script> 

当前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> 

我将非常感谢您的帮助，我尽我所能。