jQuery 自动完成未正确呈现

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 自动完成组件不喜欢整数数组的输入。

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

Answer 1

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

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

$('#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 自动完成仅支持两种数组格式，如下所述：-

source Type:

Array or String or Function( Object request, Function response( Object data ) ) Default: none; must be specified Defines the data to use, must be specified. Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.

Multiple types supported: Array: An array can be used for local data. There are two supported formats: An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ] The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item.

您可以查看 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 自动完成未正确呈现

jQuery AutoComplete not rendering correctly

javascript

jquery

jquery-ui-autocomplete