javascript - AJAX 请求填充弹出窗口，仅对 php 文件运行一次

Question

我制作了一个简单的搜索栏，其中在每个 .keyup() 事件中，异步请求都会发送到 php 文件，然后该文件将数据填充到 Bootstrap 弹出窗口中。

问题是，在弹出窗口中，数据仅填充一次，即当我键入第一个字符时，即使在多个 .keyup() 事件之后，也会显示相同的数据。

这是代码:

HTML:

<input type="text" data-placement="bottom" id="search" name="search1" class="search-box" placeholder="Search..." title="Results"/>

AJAX:

$("#search").keyup(function(){
        console.log('erer');
        //var searchString = $("#search").val();
        var data = $("#search").val();
         console.log(data);
          var e=$(this);
        //if(searchString) {
            $.ajax({
                type: "POST",
                url: "do_search.php",
                data: {search:data},
               success: function(data, status, jqXHR){
                    console.log('html->'+data+'status->'+status+'jqXHR->'+jqXHR);
                    e.popover({
                    html: true,
                    content: data,
                    }).popover('show');         
              },
               error: function() {
                    alert('Error occured');
                }
            });    
        //}
    });``

PHP:

  $word = $_POST['search'];
    //echo $word;
    //$word=htmlentities($word)
    $sql = "SELECT FName FROM user WHERE FName LIKE '%$word%' ";
    //echo $sql;
    // get results
    //$sql = 'SELECT * FROM Profiles';
     $end_result = '';
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
         #$end_result.='<li>'.$row["FName"].'</li>';
        #$_SESSION['fnamer'] = $row['Fname'];
         #$end_result.='<li>'.'<a href =view_search.php>'.$row["Fname"].'</a>'.'</li>';
        echo '<a href =view_search.php>'.$row["FName"].'</a>';
    }
        #echo $end_result;
}

即使在 $.ajax 的 success 参数中，数据打印得很好，即，当我输入不同的字母时，它会发生变化，但是弹出窗口内容不会改变。

请提供一些建议来解决此问题。

Answer 1

弹出窗口已经显示。这不是动态更改弹出窗口内容的正确方法。

您的代码:https://jsfiddle.net/gsffhLbn/

相反，直接处理弹出窗口的内容:

var popover = e.attr('data-content',data);
popover.setContent();

工作解决方案

fiddle :https://jsfiddle.net/gsffhLbn/1/