JQuery автозаполнение не ограничивает результаты поиска значения в элементе управления вводом

0

Я попытался получить поиск только для возврата результатов, соответствующих тому, что вводит пользователь в поле поиска, но мое решение возвращает ВСЕ результаты ВСЕГО. На самом деле это не так полезно. У моего JSON есть идентификатор и имя, поэтому он выглядит примерно так:

[{"id":"48de475e-cbf2-4264-a482-02cbe9dbcbfb","name":"[email protected] for Username: sampleuser"}]

Javascript/jQuery ниже - это простой вызов ajax для моего контроллера, который возвращает JsonResult через HTTP GET. Я сопоставляю возвращаемые данные и отображаю их в элементе управления автозаполнением. Я не уверен, почему функция поиска не вернет подмножество данных.

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>
  • 0
    Я не вижу, где вы фильтруете список по поисковому запросу. Я предполагаю, что вы не делаете этого на серверной части, но вы не показали нам никакого кода на стороне сервера.
  • 0
    код сервера просто возвращает простой массив json, поэтому я поставил эти результаты наверх.
Показать ещё 5 комментариев
Теги:
autocomplete

1 ответ

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню