Question

这是我通过 POST api调用获得的示例数据，我必须在MVC View中使用typeahead搜索。

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

我想在typeahead搜索中显示课程名称，为此我使用 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方法。我在远程选项中使用过滤器方法来更改数据集，我将更改为typeahead更容易使用的数据集：

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

在您的情况下，您需要检查要返回的数据，并可能使用data.MyWrapper.lstCourses。但是，您可以使用浏览器中的开发工具轻松检查这些内容。如果您使用过滤方法，则可以将displayKey设置保留为＆＃34;值＆＃34;。

使用Post ajax调用进行预先搜索无法正常工作

1 个答案: