自动完成的JQuery不显示结果 [英] Autocomplete JQuery not displaying results

问题描述

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

I am trying to display the results on my autocomplete textbox but I'm not sure how to return the results from the ajax call, or I'm not sure why it fails to display them. The data is displayed on my Alert(data) like this:

[{"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或其他)，或如何声明变量. 有什么想法吗?

I believe the problem is on the response($.map(data.d, function (item) block because I'm not sure what values to insert there (id or val or something else), or how to declare the variables. Any ideas?

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

修改

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

After I modified my 'success' code, I can see the dropdown menu with empty items:

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下拉列表中的正确项目?

Any ideas how to get the correct items on the dropdown list of JQuery from my array?

推荐答案

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

The jQuery UI Autocomplete widget requires the response to be an array of objects with label and value keys. If that's the autocompleter your using, you'll need to change your map to:

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

修改

您可以将编辑后的代码更改为此:

You can change your edited code to this:

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

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

You only need to map the parsed JSON once, if you try to map it again the property names will be different, which is why you got an array of empty objects.

这篇关于自动完成的JQuery不显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！