Невозможно выбрать из параметров выбора автозаполнения JQuery - PullRequest
Новая
       21

Невозможно выбрать из параметров выбора автозаполнения JQuery

3 голосов
/ 12 января 2012

Я работаю над этой функцией автозаполнения jQuery и не могу выбрать элемент, выбранный из набора результатов, который будет отображаться в текстовом поле после нажатия на него.

Как видите, код возвращается и пункт, я вижу выпадающий. (Я бы опубликовал фото, но я новичок и не могу = /) но после того, как я нажму на него, ничего не происходит: (Джо Блоу уходит, не показывается, но результат только 99 в поле)

вот мой код: 

var techNumber = $('#<%= txtTechNumber.ClientID %>');
        techNumber.autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '<%=ResolveUrl("~/Service/ServiceHelpdesk/") %>srvWebServiceRepository.asmx/FetchTechnicianList',
                    data: "{ 'techNumber':'" + request.term + "' }",
                    dataType: "json",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        if (data.d != null) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: highlight(item.TechNumber, request.term) + " - " + item.TechFirstName + " " + item.TechLastName,
                                    value: item.TechID
                                }
                            }))
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    },
                    select: function(event, ui) {
                        techNumber.val(ui.item);
                    }
                });
            },
            minLength: 1
        });

Ответы [ 2 ]

3 голосов
/ 12 января 2012

Вместо использования ui.item, используйте ui.item.label в вашем select обработчике.Вероятно, это не помешает preventDefault событию.Наконец, убедитесь, что определение для обработчика select находится внутри объекта параметров, переданного виджету (ранее это было в объекте параметров AJAX): 

var techNumber = $('#<%= txtTechNumber.ClientID %>');
        techNumber.autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '<%=ResolveUrl("~/Service/ServiceHelpdesk/") %>srvWebServiceRepository.asmx/FetchTechnicianList',
                    data: "{ 'techNumber':'" + request.term + "' }",
                    dataType: "json",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        if (data.d != null) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: highlight(item.TechNumber, request.term) + " - " + item.TechFirstName + " " + item.TechLastName,
                                    value: item.TechID
                                }
                            }))
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            select: function(event, ui) {
                event.preventDefault();
                techNumber.val(ui.item.label);
            }            
            minLength: 1
        });
0 голосов
/ 11 мая 2012

Это общее исправление.

Добавьте это поверх вашей функции перед вызовом .autocomplete 

(function ($) {

    $(".ui-autocomplete-input").live("autocompleteopen", function () {
        var autocomplete = $(this).data("autocomplete"),
        menu = autocomplete.menu;

        if (!autocomplete.options.selectFirst) {
            return;
        }

        menu.activate($.Event({ type: "mouseenter" }), menu.element.children().first());
    });

} (jQuery));

А затем внутри функции просто добавьте параметр selectFirst: true как

$('#ctl00_PageBody_txtKeywords').autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'POST',
                url: 'getData.asmx/LoadData',
                selectFirst: true,

(PS Не удалось найти исходную ссылку, это должно указывать на нее http://bit.ly/INzcrv)

...