JQuery UI Автозаполнение кнопки и проблемы с отображением - PullRequest
Новая
       5

JQuery UI Автозаполнение кнопки и проблемы с отображением

2 голосов
/ 22 января 2012

У меня есть следующий код: 

function testSearch() {
    $(".searchfield").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{ path('my_search') }}",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.label,
                            value: item.value
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            $.each(ui, function (key, value) {
                window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value

            });
        },
        focus: function (event, ui) {
            /* $.each(ui, function(key, value) {
                alert(key + " " + value);
            });*/
        },
    })
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        var a = $('<a>', {
            href: "{{ path('my_show_product', {'productId': ''}) }}" + "/" + item.value,
            text: item.label
        });

        var $li = $('<li></li>', {
            style: "width:100%"
        });

        return $li.append(a).data('item.autocomplete', item.value).appendTo(ul);
    };
}

мои данные возвращаются из функции, вызванной функцией $.ajax выше, в этом формате json: 

[ { label: 'test label', value: '1234' }, { label: 'test label1', value: '4567' } ]

поле ввода выглядит следующим образом: 

<input type="text" class="searchfield" name="searchfield" value="Search for Products" />

Пока что я могу искать элементы и получать результаты в указанном выше формате, отображаемом в начале списка.Каждый элемент ссылается на страницу http://mydomain/products/(value)

В настоящее время у меня возникает следующая проблема: если я что-то ищу и появляется список поиска, я могу перемещаться по списку с помощью клавиатуры, нажимать кнопку ввода и получатьперенаправлены на нужную страницу, но полные метки каждого элемента, который я фокусирую, не отображаются в поле поиска ввода, показанном выше.

Как мне этого добиться?

РЕДАКТИРОВАТЬ: такЯ пытался изменить код следующим образом: 

function testSearch() {
$(".searchfield").autocomplete({
source:  function( request, response ) {
    $.ajax({
        url: "{{ path('my_search') }}",
        dataType: "json",
        data: {
            term: request.term
        },
        success: function( data ) {

            response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.value
                }
            }));
        }
    });
},
minLength: 1,
select: function( event, ui ) {

    $.each(ui, function(key, value) {
      window.location = "{{ path('my_show_product', {'productId': ''}) }}"+"/" + value

        });
},

focus: function(event, ui){ 

    $('.ui-autocomplete-input').val(ui.item.label);
            $(this).val(ui.item.label);
    //alert($('#searchfield')[0].className);
    //alert(ui.item.label);
    //$(this).val($(ui.item).text());
//  $('.searchfield').val($(this).val(ui.item.label)); 

    }

})
$.ui.autocomplete.prototype._renderItem = function(ul, item) {

var a = $('<a>', {
    href: "{{ path('my_show_product', {'productId': ''}) }}"+"/" + item.value,
    text: item.label
});

 var $li = $('<li></li>', {style:"width:100%"});

 return $li.append(a).data('item.autocomplete',  item).appendTo(ul);

};

}

, но, кажется, что ответ вызывает проблемы: если я уйду: 

response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.value
                }
            }));

, чем текстовое поле получить«значения» каждой метки, это не то, что я хочу.если я изменяю его на: 

response( $.map( data, function( item ) {
                return {
                    label: item.label,
                    value: item.label
                }
            }));

, я вижу метки в поле ввода, но ссылка для каждого элемента находится в структуре http://mydomain/(label), а не http://mydomain/(value). что янужен последний.

Есть идеи?

1 Ответ

1 голос
/ 22 января 2012

Потому что вы ничего не делаете в событии focus.

Если вы хотите что-то конкретное, вы можете сделать это внутри события focus, иначе просто удалите его из опции. По умолчанию плагин позаботится об установке выделенного значения в textbox, если вы не укажете событие focus в опциях. 

    $(".searchfield").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "{{ path('my_search') }}",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.label,
                            value: item.value
                        }
                    }));
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            $.each(ui, function (key, value) {
                window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value

            });
        }
    })
...