使用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"
            }
        ]
    }
}

我想，以显示预输入搜索课程名称，为此我一个使用typeaahead.js和警犬

这是我的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方法将数据集更改为更容易被预输入使用的数据集：

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

在您的情况下，您需要检查要返回的数据，并且可能使用data.MyWrapper.lstCourses 。 但这就是您可以使用浏览器中的dev工具轻松检查的内容。 如果使用过滤器方法，则可以将displayKey设置保留为“ value”。