使用 Post ajax 调用的预输入搜索不起作用

Question

这是我通过 POST api 调用获得的示例数据，我必须在 MVC 视图中进行预输入搜索。

{
    "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"
            }
        ]
    }
}

我想在预输入搜索中显示课程名称，为此我使用 typeaahead.js 和 bloodhound

这是我的 html 代码，我的问题是课程名称没有作为建议出现在文本框中。

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

我在处理嵌套对象以设置为时面临的主要问题source.Can谁能告诉我正确的路径？有相关链接吗？

Answer 1

我能想到两件事可以为您解决这个问题。

您可以尝试更改 typeahead 的初始化，以便显示键是数据中的属性：

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

您也可以尝试将 filter 方法添加到 remote。我在我的远程选项中使用过滤器方法来更改数据集我得到的东西更容易被预先输入：

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

使用 Post ajax 调用的预输入搜索不起作用

Typeahead search with Post ajax call not working

javascript

ajax

typeahead.js

twitter-typeahead

bloodhound