Question

我遇到了Kendo UI AutoComplete小部件的问题。我只有一个简单的文本字段，我在其上应用此插件，当用户在建议弹出窗口中选择一个值时，该值将放在同一文本字段中，另一个放在隐藏字段中（在这种情况下，id所选项目）。

要在隐藏字段中存储数据，我使用select事件。

一切正常！但不幸的是，如果用户太快，就会出现问题。根本不调用select事件，widget会跳转到close事件。因此，正确的值在文本字段中，但隐藏字段为空，因为未调用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

        });
});

};

有人可以帮我一把，或者只是向我解释我做错了什么？非常感谢！非常感谢你！

Answer 1

更改

delay: 0

要

delay: 500

这将强制自动完成在执行前从最后一个keyup等待500 ms。您也可以添加

minLength: 3

在自动完成执行之前强制执行至少3个键

Kendo UI Autocomplete Widget：用户太快了

1 个答案: