Ajax autocomplete не возвращает правильное значение

Question

У меня есть автозаполнение ajax, где оно возвращает полное имя пользователя. Однако, когда бывают случаи, когда некоторые имена или значения одинаковы, он не возвращает правильное значение. Скорее, он возвращает первое значение в раскрывающемся списке. Даже если он имеет 4 одинаковых входа, он все равно возвращает первое значение.

Когда я нажимаю Stannis Аррен Баратеон, он возвращает Stannis Targaryen Баратеон.

Вот мой PHP код (SQL/PHP код; ad.php):

<?php 
include('config.php'); 
if($_POST) 
{ 
    if($_POST['search_keyword']) 
    { 
     $similar = mysql_real_escape_string($_POST['search_keyword']); 

     $result=mysqli_query($conn, "SELECT * FROM person WHERE (firstName like '" . $_POST["search_keyword"] . "%' OR lastName like '" . $_POST["search_keyword"] . "%') AND residentOrNot = 'Yes' "); 

     if (mysqli_num_rows($result) > 0) { 
      while($row=mysqli_fetch_array($result)) 
      { 
       //$name = $row['fullname']; 
       //$copiedname = $row['fullname']; 
       //$b_name= '<strong>'.$similar.'</strong>'; 
       //$final_name = str_ireplace($similar, $b_name, $name); 
       ?>   
       <div class="show" align="left"> 
        <span class="returnName"><?php echo $row["firstName"].' '.$row["middleName"].' '.$row["lastName"]; ?></span> 
        <span class="returnID" style="display:none"><?php echo $row['idPerson'];?></span> 
       </div> 


      <?php 
      } 
     } 

     else { 
      ?> 
       <div class="show" align="left"> 
        <span class="returnMessage">No matching records found.</span> 
       </div> 
      <?php 
     } 

    } 



    mysqli_close($conn); 
} 
?> 

HTML формы ввода:

<form method="post" action="try.php" name="try"> 
<div class='web'> 
    <input type="text" class="search_keyword" id="search_keyword_id" placeholder="Search" /> 
    <input type="hidden" name="resID" id="resID"/> 
    <div id="result"></div> 
    <input type="submit" name="try" value="Submit"> 
</div> 

AJAX/JS/JQuery КОД (я думаю, что именно здесь возникает проблема):

<script type="text/javascript"> 
$(function(){ 
$(".search_keyword").keyup(function() 
{ 
    var search_keyword_value = $(this).val(); 
    var dataString = 'search_keyword='+ search_keyword_value; 
    if(search_keyword_value!='') 
    { 
     $.ajax({ 
      type: "POST", 
      url: "ad.php", 
      data: dataString, 
      cache: false, 
      success: function(html) 
       { 
        $("#result").html(html).show(); 
       } 
     }); 
    } 
    return false;  
}); 

jQuery("#result").on("click", function(e) 
    { 
    /*var $clicked = $(e.target); 
    var $name = $clicked.find('.returnName').html();  
    var decoded = $("<div/>").html($name).text(); 
    $('#search_keyword_id').val(decoded); 

    var $clicked = $(e.target); 
    var $id = $clicked.find('.returnID').html();  
    var id = $("<div/>").html($id).text(); 
    $('#resID').val(id); 
    */ 
    $name = $('span.returnName',this).html(); 
    $name = $("<div/>").html($name).text().toString(); 
    $('#search_keyword_id').val($name); 
    $id = $('span.returnID',this).html(); 
    $id = $("<div/>").html($id).text().toString(); 
    $('#resID').val($id); 



}); 

jQuery(document).on("click", function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.hasClass("search_keyword")){ 
    jQuery("#result").hide(); 
    } 
}); 
}); 
</script> 

Это действительно возвращает первое значение, даже если я нажимаю второе или третье или четвертое значение. Где я ошибся в своем коде? Пожалуйста, помогите мне. Спасибо огромное!

Answer 1

Ваш код в настоящее время собирает все элементы с классом returnName в #result, а также по телефону .html() на этой коллекции JQuery будет возвращать только HTML первого найденного элемента. То же самое касается вашего поиска returnID. Вот почему вы только получаете первую возвращенную запись.

Измените обработчик обработчика #result, чтобы вызвать только элементы с классом show, так как это элемент, который будет содержать ваши данные.

jQuery("#result").on("click", ".show", function(e){ 

Тогда все, что вам нужно сделать, это поиск элементов с классом returnName и returnID и называют .text().

var showName = $('.returnName',this).text(); 
var showId = $('.returnID',this).text(); 
$('#search_keyword_id').val(showName); 
$('#resID').val(showId); 

Так все вместе

jQuery("#result").on("click", ".show", function(e){ 
    var showName = $('.returnName',this).text(); 
    var showId = $('.returnID',this).text(); 
    $('#search_keyword_id').val(showName); 
    $('#resID').val(showId); 
}); 

Хотя обратите внимание, что, вероятно, более эффективные способы возвращения данных, и использовать его, а не транспортировать его в HTML-элементов. Например, используйте data-* attributes вместо отдельного элемента span, чтобы содержать ваш идентификатор.

Другой вариант - использовать jQuery-UI's autocomplete, который работает на большинстве клиентских сторон, и просто возвращает необработанные данные в формате JSON из вашего php-скрипта.

Answer 2

В коде PHP, изменить:

<div class="show" align="left"> 
     <span class="returnName"><?php echo $row["firstName"].' '.$row["middleName"].' '.$row["lastName"]; ?></span> 
     <span class="returnID" style="display:none"><?php echo $row['idPerson'];?></span> 
</div> 

с этим:

<div class="show" align="left"> 
    <span class="returnName" data-id="<?php echo $row['idPerson'];?>"><?php echo $row["firstName"].' '.$row["middleName"].' '.$row["lastName"]; ?></span> 
</div> 

И ваша новая функция JQuery:

jQuery("#result").on("click","'.returnName" function(e) 
{ 
    var choosenName = $(this).html();  
    var choosenId = $(this).data('id'); 
    $('#search_keyword_id').val(choosenName); 
    $('#resID').val(choosenId); 
});