Виджет автозаполнения интерфейса Kendo: пользователь слишком быстр

0

У меня проблема с виджетами Kendo UI AutoComplete. У меня просто простое текстовое поле, на которое я применяю этот плагин, и когда пользователь выбирает значение в всплывающем окне предложения, значение помещается в одно и то же текстовое поле, а другое - в скрытое поле (в этом случае идентификатор выбранного элемента).

Чтобы хранить данные в скрытом поле, я использую событие select.

Все работает отлично! Но, к сожалению, проблема возникает, если пользователь слишком быстр. Событие select не вызывается вообще, и виджет переходит к событию закрытия. Итак, правильное значение находится в текстовом поле, но скрытое поле пуст, потому что событие select не было вызвано.

Здесь моя полная функция:

function myAutoComplete() {

$("input.autocomplete").each(function() {

    var thisId = $(this).attr('id');

    if (!$(this).data('ac_applied')) {

        $(this).data('ac_applied',true);

        var acCase = '';
        var parentForm = '';
        var parentDiv = '';
        var prefixTarget = '';
        var selectorTarget = '';
        var hiddenVal = '';
        var selectedEnt = '';

        if ($(this).hasClass('ac-cli')) {
            acCase = 1;
            selectorTarget = 'client_id';
            hiddenVal = 'dataItem.CLI_NUM';
        }
        else if ($(this).hasClass('ac-ent')) {
            acCase = 2;
            selectorTarget = 'entreprise_id';
            hiddenVal = 'dataItem.ENT_NUM';
        }
        else if ($(this).hasClass('ac-suc')) {
            acCase = 3;
            selectorTarget = 'succursale_id';
            hiddenVal = 'dataItem.SUC_NUM';
        }
        else if ($(this).hasClass('ac-res')) {
            acCase = 4;
            selectorTarget = 'ressource_id';
            hiddenVal = 'dataItem.id';
        }

        parentForm = $(this).closest('form').attr('id');
        if ($('#'+parentForm).hasClass('add-item-form')) {

            parentDiv = $('#'+parentForm).closest('div.add-item-tool-tip').attr('id');
            var parentToolTip = $('#'+parentDiv).closest('div.qtip').attr('id');

            prefixTarget = '#'+parentToolTip;
        }
        else {
            prefixTarget = '#ajoutTicket';
        }

        $(this).kendoAutoComplete({

            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url : "utils/autocomplete.php",
                        cache : false
                    },
                    parameterMap: function(options, operation) {
                        return {
                            contains: options.filter.filters[0].value,
                            case: acCase,
                            ent: $(prefixTarget + ' input[id*="entreprise_id"]').val()
                        };
                    }
                },  
                schema: {
                    data: "data"
                },
                serverFiltering: true
            }),
            open: function(e) {
                var inputWidth = $('#'+thisId).css('width');
                $('div.k-animation-container').width(inputWidth);
            },
            select: function(e){     
                var dataItem = this.dataItem(e.item.index());

                switch (acCase) {
                    case 1 :

                        $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.CLI_NUM);

                        if (prefixTarget == '#ajoutTicket') {

                            if (dataItem.CLI_TICKET_EMAIL == 'OUI' && dataItem.ENT_TICKET == 'OUI') {
                                $("#mailchoix_rd1").attr('checked', false);
                                $("#mailchoix_rd2").attr('checked', true);
                            }
                            else if (dataItem.CLI_TICKET_EMAIL == 'NON' && dataItem.ENT_TICKET == 'NON') {
                                $("#mailchoix_rd1").attr('checked', true);
                                $("#mailchoix_rd2").attr('checked', false);
                            }
                            else if (dataItem.CLI_TICKET_EMAIL == 'OUI' && dataItem.ENT_TICKET == 'NON') {
                                $("#mailchoix_rd1").attr('checked', false);
                                $("#mailchoix_rd2").attr('checked', true);
                            }
                            else if (dataItem.CLI_TICKET_EMAIL == 'NON' && dataItem.ENT_TICKET == 'OUI') {
                                $("#mailchoix_rd1").attr('checked', false);
                                $("#mailchoix_rd2").attr('checked', true);
                            }

                            if (dataItem.ENT_FACTURATION == 1) {
                                $("#radio_fact_1").prop('checked', true);
                                $("#radio_fact_2").prop('checked', false);
                                $("#radio_fact_3").prop('checked', false);
                            }
                            else if (dataItem.ENT_FACTURATION == 2) {
                                $("#radio_fact_1").prop('checked', false);
                                $("#radio_fact_2").prop('checked', true);
                                $("#radio_fact_3").prop('checked', false);
                            }
                            else if (dataItem.ENT_FACTURATION == 3) {
                                $("#radio_fact_1").prop('checked', false);
                                $("#radio_fact_2").prop('checked', false);
                                $("#radio_fact_3").prop('checked', true);
                            }
                            else {
                                $("#radio_fact_1").prop('checked', true);
                                $("#radio_fact_2").prop('checked', false);
                                $("#radio_fact_3").prop('checked', false);
                            }

                        }

                        break; 

                    case 2 :
                        $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.ENT_NUM);

                        if (prefixTarget == '#ajoutTicket') {

                            if (dataItem.ENT_FACTURATION == 1) {
                                $("#radio_fact_1").prop('checked', true);
                                $("#radio_fact_2").prop('checked', false);
                                $("#radio_fact_3").prop('checked', false);
                            }
                            else if (dataItem.ENT_FACTURATION == 2) {
                                $("#radio_fact_1").prop('checked', false);
                                $("#radio_fact_2").prop('checked', true);
                                $("#radio_fact_3").prop('checked', false);
                            }
                            else if (dataItem.ENT_FACTURATION == 3) {
                                $("#radio_fact_1").prop('checked', false);
                                $("#radio_fact_2").prop('checked', false);
                                $("#radio_fact_3").prop('checked', true);
                            }
                            else {
                                $("#radio_fact_1").prop('checked', true);
                                $("#radio_fact_2").prop('checked', false);
                                $("#radio_fact_3").prop('checked', false);
                            }

                        }

                        break;

                    case 3 :
                        $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.SUC_NUM);
                        break;

                    case 4 :
                        $(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.id);
                        break;      
                }
            },
            close: function(e) {
                alert('close');
            },
            highlightFirst: true,
            suggest: true,
            dataTextField: "SearchField",
            animation: false,
            delay: 0

        });
});

};

Может кто-нибудь дать мне руку или просто объяснить мне, что я делаю неправильно? Это будет высоко ценится! Большое спасибо!

Теги:
kendo-ui
autocomplete
kendo-autocomplete

1 ответ

0

+ Изменить

delay: 0

к

delay: 500

Это заставит автозаполнение ждать 500 мс от последней клавиатуры до ее выполнения. Вы также можете добавить

minLength: 3

заставить минимум 3 ключа до выполнения автозаполнения

  • 0
    Спасибо! Я попробую ваше решение!

Ещё вопросы

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