Question

当我点击添加行时，textarea会显示。 textarea在keyup上有自动提示中的项目。我的问题是第一个显示自动完成。其他人没有工作

<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>

<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
    var name = $(this).val();
    $.ajax({
        url:"ajax.php",
        type:"POST",
        data:{name:name},
        success:function(res)
        {
            $(".name + ul").append("<li class=item>"+res+"</li>");
        }
    });
}); 

$("ul").on("click", "li", function(){
    var item = $(this).text();
    $(".name").val(item);
    $("ul li").remove();
});
});
</script>

Answer 1

试

var name = $(this).val();
var data = name + "&Sessid=" + Math.random();
$.ajax({
    url:"ajax.php",
    type:"POST",
    data:data,
    success:function(res)
    {
        $(".name + ul").append("<li class=item>"+res+"</li>");
    }
});

}）;

Answer 2

首先，更改id的{{1}}和name字段。为您的元素提供相同的textarea名称并不是一个好主意。

id

现在，通过此获取id名称：

<textarea id="name1" class="name" name="name1"></textarea><ul></ul>
<textarea id="name2" class="name" name="name2"></textarea><ul></ul>
<textarea id="name3" class="name" name="name3"></textarea><ul></ul>

并将var which_id = $(this).attr('id');变量用于您的ajax响应。

which_id

Answer 3

以下示例不需要与文本区域关联的任何id。

<textarea class="name" name="name1"></textarea><ul></ul>
<textarea class="name" name="name2"></textarea><ul></ul>
<textarea class="name" name="name3"></textarea><ul></ul>

<script type="text/javascript">
$(document).ready(function(){
    $(".name").keyup(function(){
        var field = $(this);
        var name = field.val();
        $.ajax({
            url:"ajax.php",
            type:"POST",
            data:{name:name},
            success:function(res)
            {
                field.next("ul").append("<li class=item>" + res + "</li>");
            }
        });
    });

    $("ul").on("click", "li", function(){
        var li = $(this);
        var item = li.text();
        li.parent('ul').empty().prev('.name').val(item);
    });
});
</script>

如何为同一个班级自动完成

3 个答案: