Ajax 自动完成不返回正确的值

Question

我有一个 ajax 自动完成功能，它返回用户的全名。但是，当某些名称或值相同的情况下，它不会返回正确的值。相反，它返回下拉列表中的第一个值。即使它有 4 次相同的出现，它仍然返回第一个值。

当我点击史坦尼斯·艾林·拜拉席恩时，它会返回史坦尼斯·坦格利安·拜拉席恩。

这是我的 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 CODE（我认为这就是问题所在）：

<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

您的代码当前正在收集#result 中类returnName 的所有元素，并且通过在该集合上调用.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 元素来包含您的 id。

另一种选择是使用jQuery-UI's autocomplete，它会为您完成大部分客户端工作，并从您的 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 );
});