Question

我的网站上有两个jQuery自动完成组件。然而，两者几乎完全相同，一个显示正确，一个不显示。

工作代码是：

@Html.TextBoxFor(model => model.Part, new { @id = "txtPartCode" })

$('#txtPartCode').autocomplete({
    minLength: 3,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Part/Filtered/' + $('#txtPartCode').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    response(data);
                }
        });
     }
});

失败的代码是：

@Html.TextBoxFor(model => model.ParentRequestId, new { @id = "txtParentRequest" })

$('#txtParentRequest').autocomplete({
    minLength: 1,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Request/' + $('#txtParentRequest').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    response(data);
                }
            });
     }
});

正如您所看到的，它们非常相似。 API的工作响应为["string1", "string2", "string3"]，而损坏的响应为[1,2,3,4]。

jQuery库包含在我的包中，所以在所有页面上应该是相同的。我使用了jquery.js，jquery-ui.js和jquery-ui.css。

我无法弄清楚它们之间的区别，为什么它没有正确显示。

破碎的显示如下：

对此的任何帮助将不胜感激。如果需要更多信息，请告诉我

编辑 - 解决方案，但为什么？

所以问题似乎是jQuery Autocomplete组件不喜欢整数数组的输入。

这对我来说似乎很奇怪，我相信自动完成应该能够应对整数。有人知道为什么会这样，或者是否有设置来处理它？</ p>

Answer 1

jquery-ui自动完成功能可以很好地处理String响应。您的响应数据应该是字符串列表而不是整数（因为input元素的value属性始终是字符串）。

尝试将响应数据转换为客户端或服务器端的字符串。我更喜欢在客户端这样做。

$('#txtParentRequest').autocomplete({
    minLength: 1,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Request/' + $('#txtParentRequest').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    // Convert the integer list to a string list
                    var stringList = $.map(data, function(element){
                                         return element + "";
                                     })
                    response(stringList );
                }
            });
     }
});

Answer 2

这是因为JQuery自动完成仅支持两种数组格式，如下所述： -

来源类型：

数组或字符串或函数（对象请求，函数   response（Object data））默认值：none;必须指定定义   必须指定要使用的数据。独立于您使用的变体，   标签始终被视为文本。如果你想要标签   作为html处理，你可以使用ScottGonzález的html扩展名。演示   所有这些都集中在源选项的不同变体上 - 寻找一个   与您的用例匹配，并查看代码。

支持多种类型：数组：数组可用于本地数据。   有两种支持的格式：一个字符串数组：[“Choice1”，   “Choice2”]具有标签和值属性的对象数组：[{   label：“Choice1”，value：“value1”}，...] label属性为   显示在建议菜单中。该值将被插入到   用户选择项目时的输入元素。

您可以查看API文档以获取更多详细信息： http://api.jqueryui.com/autocomplete/

所以根据我的说法，您可以将数组从后端转换为字符串，或者您可以通过Javascript将其转换为： -

$('#txtParentRequest').autocomplete({
    minLength: 1,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Request/' + $('#txtParentRequest').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    if(data!=null && data.length>0){
                            var numberArray=data.map(String);
                            response(numberArray);
                            //Or response(data.map(String));
                    }  
                }
            });
     }
});

jQuery AutoComplete无法正确呈现

2 个答案: