javascript - 尝试从 中选择单个项目并将该值放入文本框中

Question

我有

<input type="text" id = "addressbox" size="30" onkeyup="showResult(this.value)">

<ul class="livesearch" id="livesearch" style="border: 1px solid rgb(165, 172, 178);">
  <li><a href="#">ADDRESS1</a></li><br>
  <li><a href="#">ADDRESS 2</a></li><br>    
</ul>

对于 JavaScript

$('.livesearch').click(function() {
  var value = $(this).text();
  var TheTextBox = document.getElementById("addressbox");
  TheTextBox.value = value;
});

当我单击链接时，它会选择 <ul> 内的所有地址。而不是我单击的单个地址，例如，我单击地址 1 但在文本框中显示地址 1 和地址 2....我做错了什么？

Answer 1

为什么要混合纯 JavaScript 和 jQuery？坚持只用一个。我强烈的感觉是浏览器正在跟踪该链接。使用 return false或event.preventDefault()阻止浏览器跟踪该链接。

另外，请不要使用<br />不必要的。由于您要动态更新元素，因此请使用事件委托(delegate)，如下所示:

$('.livesearch').on("click", "a", function(e) {
  e.preventDefault();
  $("#addressbox").val($(this).text());
});

* {margin: 0; padding: 0; list-style: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id = "addressbox" size="30" onkeyup="showResult(this.value)">

<ul class="livesearch" id="livesearch" style="border: 1px solid rgb(165, 172, 178);">
  <li><a href="#">ADDRESS1</a></li>
  <li><a href="#">ADDRESS 2</a></li>
</ul>