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 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

您的代码目前正在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元素来包含您的ID。

另一个选择是使用jQuery-UI's autocomplete来完成大部分客户端工作，只需从PHP脚本返回JSON格式的原始数据。

Answer 2

在你的php代码中，改变一下：

document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp, [ ng.http.HTTP_PROVIDERS]);
});

有了这个：

<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>

你的新jquery函数：

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

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

2 个答案: