Question

我正在尝试将jQuery与类而不是ID一起使用，因为我将处于这样一种情况：我根据用户输入生成由php生成的相同文本字段。当用户开始键入时，会出现一个加载器，然后在第四个键击中，结果将通过php / ajax显示在无序列表中。我遇到的问题是，当用户键入文本字段1时，文本字段1和2都会出现无序列表，只有在它们输入的文本字段中才会出现。

我尝试了类似这样的东西，但它没有产生结果，控制台也没有给我任何错误。

$(".result").closest("ul").html(data);

这是完整代码（html）

<div class="form-group">
<input type="text" name="name" autocomplete="off">
<div class="result"></div>
</div>
<div class="form-group">
<input type="text" name="name" autocomplete="off">
<div class="result"></div>
</div>

的jQuery

$(document).ready(function() {
$("input").keyup(function() {
    var input = $(this).val();
    $(".loader").show();
    if (input.length > 3) {
        $.ajax({
            type: 'POST',
            url: 'insert-ajax.php',
            data: {
                name: input
            },
            success: function(data) {

                if (!data.error) {
                    //$(".result").html(data);
                    $(".result").closest("ul").html(data);
                    $(".loader").hide();
                }
            }

        });
    }

    if (input.length < 1) {
        $(".loader").hide();
        $(".result").html("");
    }
});

$(".result").on("click", "li", function() {
    console.log($(this).text());
    $(this).closest(".result").siblings("input").val($(this).text());
});

});

PHP回应了ul和li

while($row = $result->fetch_assoc()) {
            $search_result = $row['short_desc'];
            echo "<ul>";
            echo "<li>" . $search_result . "</li>";
            echo "</ul>";

Answer 1

您在更新中选择了所有.result，您可以使用jQuery.ajax中的上下文来定位特定元素

    $.ajax({
        type: 'POST',
        url: 'insert-ajax.php',
        context: this,
        data: {
            name: input
        },
        success: function(data) {

            if (!data.error) {
                $(this).html(data);
                $(".loader").hide();
            }
        }

    });

获取搜索结果以显示输入的文本字段的ul

1 个答案: