jQuery自动完成不将结果限制为输入控件中的搜索值答案

【问题标题】：jQuery autocomplete not limiting results to search value in input controljQuery自动完成不将结果限制为输入控件中的搜索值
【发布时间】：2014-06-17 07:55:45
【问题描述】：

我试图让搜索只返回与用户在搜索框中输入的内容相匹配的结果，但我的解决方案始终返回所有结果。这并不是那么有用。我的 JSON 有一个 id 和 name，所以它看起来像这样：

[{"id":"48de475e-cbf2-4264-a482-02cbe9dbcbfb","name":"sample.user@someTopLevelDomain.com for Username: sampleuser"}]

下面的 Javascript/jQuery 是对我的控制器的简单 ajax 调用，它通过 HTTP GET 返回一个 JsonResult。我映射返回的数据并将其显示在自动完成控件中。我不确定为什么搜索功能不会返回数据子集。

function getEmailAddresses() {

        function log(message) {
            $("<div>").text(message).prependTo("#log");
            $("#log").scrollTop(0);
        }

        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $('#autocompleteEmailAddresses')
            .bind("keydown", function(event) {
                if (event.keyCode === $.ui.keyCode.TAB) {
                    event.preventDefault();
                }
            })
            .autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/GetEmailAddresses",
                    type: "GET",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.name,
                                value: item.id
                            }
                        }));
                    }
                });
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                log(ui.item ?
                "Selected id: " + ui.item.value :
                "Nothing selected, input was " + this.value);

                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            },
            minLength: 2,
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    };

这是我的标记

<div>
  <input type="text" id="autocompleteEmailAddresses" class="form-control item" placeholder="Enter an Email address" /> 
</div>

<div style="margin-top:2em; font-family:Arial"> 
  <div id="log" style="overflow: auto;"></div>
</div>

【问题讨论】：

我看不到您根据搜索词过滤列表的位置。我假设您没有在后端这样做，但您没有向我们展示任何服务器端代码。
服务器代码只返回一个简单的 json 数组，所以我将这些结果放在顶部。
我的方法基于这里的 jQuery 文档：jqueryui.com/autocomplete/#multiple-remote
该示例中的过滤是在服务器端完成的。如果你观察你的网络标签并输入Eurasian Pied Flycatcher，你可以看到服务器的响应中只返回了一项。
哦，那我觉得有点傻。我向我的控制器添加了一个输入参数，但我在哪里传递它。似乎我的示例代码不起作用？

标签： jquery json autocomplete

【解决方案1】：

将您的 .autocomplete 更改为以下...

.autocomplete({
     source: function (request, response) {
             $.ajax({
                url: "/Home/GetEmailAddresses?term=" + extractLast(request.term),
                type: "GET",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                async: true,
                       data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 12,
                            name_startsWith: request.term
                        },

【讨论】：