使用自动完成填充输入字段答案

【问题标题】：Filling input fields using autocomplete使用自动完成填充输入字段
【发布时间】：2017-07-14 04:47:46
【问题描述】：

我正在尝试使用 jquery 自动完成功能。我使用了search.php 文件并将数据作为

{
    "id" : 1,
    "name" : "ColdFusion",
    "type" : "Tag"
},
{
    "id" : 2,
    "name" : "C#",
    "type" : "Programming"
},

我想要什么，当我输入和建议出现并单击任何建议时，尊重的结果应该进入它们各自的输入字段。例如，我输入 Cold 并在建议中单击 ColdFusion，然后它的 id 应该进入 input id="id" 并命名为 input id="name" 并与类型类似。我想不出应该使用什么 jquery 事件，因为这是第一次使用自动完成功能。请帮助我从 jquery 站点发布了一个快速工作示例。

$( "#autocomplete" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
ID <input id="id"/>
NAME <input id="name"/>
TYPE <input id="type"/>
 
</body>
</html>

【问题讨论】：

标签： jquery json autocomplete

【解决方案1】：

你可以改变url来链接search.php

$("#txtAutocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: search.php,//url
                data: { prefixText: request.term },
                dataType: "json",
                type: "POST",
                success: function (data) {
                    response($.map(data, function (item) {
                      return {
                        label: item.value,
                        value: item.value, 
                        id: item.id,
                        type: item.type
                      }
                   }))
                },
                error: function (xhr, status, err) {
                    alert("Error")
                }
            });
        },
        select: function (even, ui) {
            $("#id").val(ui.item.id);
            $("#name").val(ui.item.value);
            $("#type").val(ui.item.type);
        }
    });

【讨论】：

【解决方案2】：

$( "#autocomplete" ).autocomplete({
    source: function (request, response) {
       var data = [
    {
       id:'1',
       value:  'c++',
       type:'lang'                            
    },
    {
       id:'2',
       value:  'java',
       type:'lang'                            
    },
	{
       id:'3',
       value:  'coldfusion',
       type:'lang'                            
    },
	{
       id:'4',
       value:  'php',
       type:'lang'                            
    }
  ];
       response($.map(data, function (item) {
         return {
							label: item.value,
							value: item.value, 
							id: item.id,
							type: item.type
						}
       }))
    },
     select: function (even, ui) {
       // Here you can set to inputs. 
       $("#id").val(ui.item.id);
       $("#name").val(ui.item.value);
       $("#type").val(ui.item.type);
    }
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
 
ID <input id="id"/>
NAME <input id="name"/>
TYPE <input id="type"/>
 
</body>
</html>

【讨论】：

谢谢。快速的问题，如果我必须用search.php 替换这个静态，我应该怎么做以及应该如何使用map？
在自动完成源中执行 ajax 调用，并且在 ajax 成功时在成功事件中添加 response 代码。保持另一件事原样。
你能举个例子吗？
我在我的一个项目中实现了相同的功能。请看我的新答案。

【解决方案3】：

您正在寻找select 方法，该方法在选择自动完成建议的值时触发

$( "#autocomplete" ).autocomplete({
    source: function (request, response) {
        var objArray = [{
                "id" : 1,
                "name" : "ColdFusion",
                "type" : "Tag"
            },
            {
                "id" : 2,
                "name" : "C#",
                "type" : "Programming"
            }];

            response(objArray);
            return;
        },
        select: function (e, ui) {
            console.log(ui.item);//this will give you the selected object
            $('#id').val(ui.item.id);
            $('#name').val(ui.item.name);
            $('#type').val(ui.item.type);
    }

这就是您应该如何将对象分配给自动完成功能，一旦选择了值，将触发 select 方法，您可以访问所选对象并执行必要的操作。

【讨论】：