自动完成 JQuery 不显示结果

Autocomplete JQuery not displaying results

本文关键字：显示 结果 JQuery      更新时间：2023-09-26

我正在尝试在我的autocomplete textbox上显示结果，但我不确定如何从 ajax 调用返回结果，或者我不确定为什么它无法显示它们。数据显示在我的Alert(data)上，如下所示：

[{"IssuerID":1,"Name":"tester test","ChequeAccountNumber":"12345678","CurrencyCode":"EUR"},{"IssuerID":3,"Name":"Taryn","ChequeAccountNumber":"1115555","CurrencyCode":"GBP"}]

我相信问题出在response($.map(data.d, function (item)块上，因为我不确定要在那里插入什么值（id 或 val 或其他东西），或者如何声明变量。有什么想法吗？

<script type="text/javascript">
    $(function () {
        $("#tags").autocomplete({
            source: function (request, response) {
                var qstring = '?' + jQuery.param({ 'SearchString': request.term });
                $.ajax({
                    url:'http://localhost/psa/DesktopModules/PsaMain/API/ModuleTask/GetIssuers' + qstring,
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data);
                        response($.map(data.d, function (item) {
                            return {
                                id: item.issuerid, //here might be the problem
                                val: item.name
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        });
    });
</script>

.html：

<div class="ui-widgetx">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

编辑

修改"成功"代码后，我可以看到带有空项的下拉菜单：

success: function (result) {
    var parsed = jQuery.parseJSON(result);
    myArray = parsed.map(function (e) {
        return { label: e.Name, value: e.IssuerID };
    });
    response($.map(myArray, function (item) {
        return { label: item.Name, value: item.IssuerID };
    }))
},

知道如何从我的数组中获取 JQuery 下拉列表中的正确项目吗？

jQuery UI 自动完成小部件要求响应是具有label键和value键的对象数组。如果这是您使用的自动完成器，则需要将地图更改为：

response($.map(data, function(item) {
  return { label: item.Name, value: item.IssuerID }
});

编辑

您可以将编辑后的代码更改为以下内容：

success: function (result) {
    var parsed = jQuery.parseJSON(result);
    var myArray = parsed.map(function (e) {
        return { label: e.Name, value: e.IssuerID };
    });
    response(myArray);
},

您只需要映射解析的 JSON 一次，如果您尝试再次映射它，属性名称将有所不同，这就是您获得空对象数组的原因。

试试这个：

success: function (data) {
                        alert(data);
                        response($.map(data, function (item) {
                            return {
                                label: item.Issuerid,
                                value: item.Name
                            }
                        }))
                    },

我遇到了这个问题，并且与您拥有的类似/相同的调试"警报"正在杀死它：

成功：函数（数据）{
警报（数据）;

忽略了检查控制台.log是否类似。

相关文章：