Question

我正在尝试使用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>

Answer 1

您正在寻找在选择自动填充建议中的值时触发的<TextBox x:Name="ModelTB" Text="{Binding Source={x:Static local:SettingsModel.ModelFolder}, Mode=TwoWay, Path=???/>方法

select

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

Answer 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>

Answer 3

您可以更改网址以链接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);
        }
    });

使用自动填充填充输入字段

3 个答案: