Ajax自動完成功能未返回正確的值

Question

我有一個ajax自動完成功能，它返回用戶的全名。 但是，在某些情況下某些名稱或值相同的情況下，它不會返回正確的值。 而是返回下拉列表中的第一個值。 即使它有4次相同的事件，它仍然會返回第一個值。

當我單擊Stannis Arryn Baratheon時，它將返回Stannis Targaryen Baratheon。

這是我的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- *屬性而不是使用單獨的span元素包含您的ID。

另一個選擇是使用jQuery-UI的自動完成功能 ，該功能可以為您完成大部分客戶端工作，並且僅從php腳本中以JSON格式返回原始數據。

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 );
});