Question

我需要你的帮助。

我在输入搜索字段中添加了一个隐藏列表。单击输入字段时将打开列表，单击正文上的任何位置时将关闭该列表。我现在想要在单击它时将列表的文本添加到输入表单。这意味着当前在输入字段中的所有文本都将替换为列表中的新文本。例如，如果您点击＆＃34; Montego Bay＆＃34;它将被添加到输入字段，并替换该字段中的当前文本。

输入字段：

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

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

Answer 1

使用.text()获取列表中链接的文本，并使用.val()替换输入字段的值。

$(".selectlink").click(function(e) {
    e.preventDefault();
    $("#HotelsPlacesEan").val($(this).text());
});

Answer 2

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

使用

更改代码中的代码段

$(this).addClass('hiddd');

请

我认为您只想隐藏有效的点击项目。否则你的代码会无限循环，并试图用这个类隐藏所有项目。

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

2 个答案: