Попытка выбрать один элемент из и поместить это значение в текстовое поле

#javascript #jquery

Вопрос:

У меня есть

 <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….что я делаю не так?

1. Изменить $('.livesearch') на $('.livesearch a')

2. это приводит к тому, что он вообще не работает, я пытался это сделать

3. @k_schultz Вы создаете ul динамический элемент?

4. попробуйте использовать только Jquery или только JS… Более доступный и поддерживаемый. Здесь у вас 50/50

5. @k_schultz Пожалуйста, посмотрите на мой ответ и совет не смешивать чистый JS и jQuery.

Ответ №1:

Зачем вы вообще смешиваете чистый JavaScript и jQuery? Придерживайтесь только одного. У меня сильное ощущение, что браузер переходит по ссылке. Используйте либо return false или event.preventDefault() , чтобы остановить переход браузера по ссылке.

Кроме того, пожалуйста, не используйте <br /> без необходимости. Поскольку вы выполняете динамическое обновление элементов, используйте делегирование событий следующим образом:

 $('.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>

1. Когда я добавляю a в $(‘.livesearch a’).click(function(e) { это нарушает код и больше не работает при нажатии

2. @k_schultz Выглядит как большая проблема? Но хорошо ли это работает во фрагменте? Как вы хотели?

3. Я создаю список динамически, будет ли в этом проблема?

Ответ №2:

попробуйте сделать это так:

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

Ответ №3:

Вы можете сделать это, используя 100% jQuery:

 $('.livesearch a').click(function() {
  var value = $(this).text();
  $("#addressbox").val(value);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
  <br>
  <li><a href="#">ADDRESS 2</a>
  </li>
  <br>
</ul>

Ответ №4:

Это потому, что ваше «это» в :

 var value = $(this).text();

ссылается на тег с классом ‘.livestream’, а именно на весь ваш ‘ul’.

Вы должны заменить ‘this’ на соответствующий селектор.