Question

问题：尝试通过自动完成功能将类的一个属性绑定到文本框。

我有一个Web API方法，它返回一个Employees列表作为输出。员工是一个包含姓名，年龄，地址，出生日期等属性的类。

当某人在名称文本框中输入少量字符时，我想自动完成/自动提取它。

例如：

姓名：Maxwell

如果有人输入＆＃34; Ma＆＃34;，我想自动推荐姓名

马特马修麦克斯韦

并允许用户选择一个。

我使用的代码是：

GetNameInformation - 返回员工名单。

$("#autocomplete-1")
            .autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/GetNameInformation?user=ma',
                        contentType: 'application/json',
                        dataType: 'json',
                        type: 'GET',
                        success: function(json) {
                            return {
                                Name: json.Name

                            }
                        },
                        error: function() {
                            // error handling
                        }
                    }); // ajax
                } // source
            });

我也在我的html上引用了这两个：

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

我的html页面有

<label for="autocomplete-1">Name: </label>
<input id="autocomplete-1">

另外，我没有看到弹出窗口上的数据：

Answer 1

将您的代码更改为：

＆＃13;

$( "#autocomplete-1" ).autocomplete({
      source: "https://api.myjson.com/bins/1bf4z5",
      minLength: 2,
      select: function( event, ui ) {
        alert( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

<label for="autocomplete-1">Name: </label>
<input id="autocomplete-1">

＆＃13;

请注意为ajax发送的网址。该URL的响应应该是一个json对象数组，如下所示：

[{"id":"Branta canadensis","label":"Greater Canada Goose","value":"Greater Canada Goose"},{"id":"Branta hutchinsii","label":"Lesser Canada Goose","value":"Lesser Canada Goose"}]

PS。由于网址是跨域的，因此无法正常工作。我在这里粘贴了网址，以便您知道请求作为ajax：https://jqueryui.com/resources/demos/autocomplete/search.php?term=canad 其中canad是在自动填充中输入的文字。

Answer 2

I used this pattern & it worked.

 $("#autocomplete-1")
                .autocomplete({
                    source: "MyMethodURL",
                    minLength: 2,
                    select: function(event, ui) {
                        $("#autocomplete-1").val(ui.item.Name);
                        return false;
                    }
                })
                .data("ui-autocomplete")._renderItem = function(ul, item) {
                    var inner_html = '<table><tr><td>' + item.Name + '</td></tr></table>';
                    return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append(inner_html)
                        .appendTo(ul);
                };
        })(jQuery);

尝试使用jQuery和Web API通过自动完成将类的一个属性绑定到文本框

2 个答案: