javascript - 使用 Post ajax 调用进行预输入搜索不起作用

Question

这是我通过 POST API 调用获取的示例数据，我必须在 MVC View 中的预输入搜索中使用它。

{
    "MyWrapper": {
        "lstCourses": [
            {
                "CourseId": 1,
                "CourseName": "BCA"
            },
            {
                "CourseId": 2,
                "CourseName": "MCA"
            },
            {
                "CourseId": 3,
                "CourseName": "Btech"
            },
            {
                "CourseId": 4,
                "CourseName": "Mtech"
            },
            {
                "CourseId": 5,
                "CourseName": "MCom"
            },
            {
                "CourseId": 6,
                "CourseName": "Phd"
            },
            {
                "CourseId": 7,
                "CourseName": "Physics"
            },
            {
                "CourseId": 8,
                "CourseName": "philosophy"
            }
        ]
    }
}

我想在预先输入搜索中显示类(class)名称，为此我使用typeaahead.js和bloodhound

这是我的 html 代码，我的问题是 CourseNames 没有作为文本框中的建议出现。

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/typeaahead.js"></script>
<div id="bloodhound">
    <input class="typeahead" type="text" placeholder="States of USA">
</div>

<script>


    var courses = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,

        remote: {
            url: 'http://localhost:54518/api/Myapi#%QUERY',
           wildcard: '%QUERY',
            transport: function (opts, onSuccess, onError) {
                var url = opts.url.split("#")[0];
                var query = opts.url.split("#")[1];
                var result;

                    $.ajax({
                        url: url,
                        data: "value=" + query,
                        type: "POST",
                        success: function (data) { return data.MyWrapper.lstCourses; },
                        error: onError,
                    })


            }
        }
    });

    courses.initialize();
    $('input').typeahead(null, {
        name: 'courses',
        displayKey: 'value',
        source: courses,
        templates: {
            empty: [
             '<div class="empty-message">',
             'no results found',
             '</div>'
            ].join('\n'),
            suggestion: function (data) {
                console.log (data);
                return '<p><strong>' + data.CourseId + '  </strong> - ' + data.CourseName + '</p>';

            }
        }


    });




</script>

我在处理嵌套对象以设置为源时面临的主要问题。任何人都可以让我走上正确的道路吗？有相关链接吗？

Answer 1

我可以想到两件事可以帮助你解决这个问题。

您可以尝试更改预输入的初始化，以便显示键成为数据中的一个属性:

name: 'courses',
displayKey: 'CourseName',
source: courses,

您还可以尝试向远程添加filter方法。我在远程选项中使用过滤器方法来更改我得到的数据集，使其更容易被预先输入使用:

remote: {
        filter: function (data) {
            if (data) {
                return $.map(data, function (object) {
                    return { id: object.id, value: object.name};
                });
            } else {
                return {};
            }
        }
    }

就您而言，您需要检查返回的数据，并且可能使用data.MyWrapper.lstCourses。但您可以使用浏览器中的开发工具轻松检查这一点。如果您使用过滤方法，则可以将 displayKey 设置保留为“value”。