Question

我正在尝试为多个输入设置自动完成功能。

这是建议：

<div id="person" class="204232">  
<div class="name" >John Smiths</div>
<div class="age" >25 years</div>
</div>

<div id="person" class="204255">  
<div class="name" >Michael Sosh</div>
<div class="age" >31 years</div>
</div>

我需要制作一些内容，当我点击div #person时，自动填写此表单。

<form ...>
<input type="text" name="name" />
<input type="text" name="age" />
<input type="text" name="adress" />
<input type="text" name="city" />
<input type="text" name="country" />
</form>

我可以在 get.php？code = [.ameName of #person]

上获得这些信息JSON编码

这就是我所做的，但它不起作用。

$("#search").on(click, function() {

        source: function (request, response) {
         $.ajax({
             url: "get.php?code="+$(this).attr('class'),
             type: "GET",
             data: request,
             success: function (data) {
                 response($.map(data, function (el) {
                     return {
                         name: el.name
                     };
                 }));
             }
         });
    },
        select: function (event, ui) {

            this.name = ui.item.name;
            $('#name').val(ui.item.name);


            event.preventDefault();
        }
});

注意：在这个例子中，我试图自动完成第一个输入，但我需要完成所有输入。

Get.php？code = 204232 return：

{"age":"25 years",
"name":"John Smiths",
"adress":"KariStr. 112",
"city":"London",
"country":"England"}

Answer 1

如果您只想设置输入，则无需使用source / select。只需调用ajax请求，将响应类型设置为JSON，并在回调上直接设置值，如下所示：

$("#search").click(function() {
    $.ajax({
         url: "get.php?code="+$(this).attr('class'),
         type: "GET",
         dataType: 'json',
         success: function (data) {
            $("input[name='name']").val(data.name);
            $("input[name='age']").val(data.age);
            $("input[name='address']").val(data.address);
            $("input[name='city']").val(data.city);
            $("input[name='country']").val(data.country);
         }
     });
});

看到您使用的选择器#name表示id = name。您可以将id添加到输入标记或使用名称选择器，如上所述。

从JSON Onclick自动完成Jquery

1 个答案: