Функция выбора события typeahead вызывается много раз, когда только

Question

У меня есть функция ниже, используя typeahead.js, и она привязывается к полю ввода.

Проблема в том, что я пытаюсь передать пользовательскую функцию, когда пользователь выберет значение из выпадающего списка.

Так что впервые он отправляет только правильные значения (один раз).Для следующего выбора он отправляет одно и то же значение дважды.При выборе нового из выпадающего списка случайным образом отправляется 4 раза.При выборе из выпадающего списка переменные должны передаваться только один раз.

$(document).on('mouseenter', '.js-ma-product-autocomplete', function (e) {

        var current_handler = $(this).attr('id');
        $('#' + current_handler).typeahead("destroy");
        var current_selected_id = $(this).siblings('.js-ma-linked-product-id').attr('id');
        var current_selected_type = $(this).siblings('.js-ma-linked-product-type').val();
        var current_selected_container = $(this).siblings('.js-ma-linked-product-container').val();
        var current_selected_btn = $(this).siblings('.js-ma-linked-product-add-btn').val();
        var initialize_master_agent_products_typeahead;

        initialize_master_agent_products_typeahead = function () {
            var master_agent_products_typeahead;
            master_agent_products_typeahead = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: "/productions/mas_products_autocomplete?query=%QUERY",
                    replace: function (url, uriEncodedQuery) {
                        return url.replace("%QUERY", uriEncodedQuery) + '&product_type=' + encodeURIComponent(current_selected_type)
                    },
                    filter: function (list) {
                        if (list.length == 0) {
                            $('#' + current_selected_id).val('');
                        }
                        return list;
                    }
                }
            });
            master_agent_products_typeahead.initialize();
            $('#' + current_handler).typeahead(null, {
                displayKey: "name",
                source: master_agent_products_typeahead.ttAdapter(),
                templates: {empty: "<div> No matching products found </div>"}
            });
            $('#' + current_handler).one('typeahead:selected', function (event, datum, name) {
                var count = 1;
                $('#' + current_selected_id).val(datum.id);
                show_options(current_selected_type);
                create_fields(current_selected_id, current_selected_type, current_selected_container, current_selected_btn, datum.id, datum.name, count++); // from this part its calling more than once.
            });
        };
        initialize_master_agent_products_typeahead();
    });

function create_fields(c_p_id, c_p_type, c_p_container, c_p_btn, l_p_id, l_p_name, count){
    // var minNumber = 300;
    // var maxNumber = 400;
    // var randomNumber = randomNumberFromRange(minNumber, maxNumber);

    // debugger;

    console.log(c_p_id);
    console.log(c_p_type);
    console.log(c_p_container);
    console.log(c_p_btn);
    console.log(l_p_id);
    console.log(l_p_name);
    console.log(count);
    console.log('*****************');

    //here it sends values multiple times

}

См. Ниже, я набрал только один раз, и это выглядит так:

Answer 1

Перейдя назад и вперед с различными опциями, я пришел к тому, что я снова инициализирую typeahead на каждом указателе мыши.

Итак, исправление будет вызывать его только один раз для каждого поля, а не все время.И использование one заставит его работать как шарм.

Вот окончательный рабочий код:

$('.js-ma-product-autocomplete').one('mouseenter', function (e) {

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

        console.log(current_handler);

        $('#' + current_handler).typeahead("destroy");
        var c_p_id = $(this).siblings('.js-ma-product-id').val();
        // var c_lp_id = $(this).siblings('.js-ma-linked-product-id').attr('id');
        var c_p_type = $(this).siblings('.js-ma-linked-product-type').val();
        var c_container = $(this).siblings('.js-ma-linked-product-container').val();
        var c_btn = $(this).siblings('.js-ma-linked-product-add-btn').val();
        var initialize_master_agent_products_typeahead;

        initialize_master_agent_products_typeahead = function () {
            var master_agent_products_typeahead;
            master_agent_products_typeahead = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: "/productions/mas_products_autocomplete?query=%QUERY",
                    replace: function (url, uriEncodedQuery) {
                        return url.replace("%QUERY", uriEncodedQuery) + '&product_type=' + encodeURIComponent(c_p_type)
                    },
                    filter: function (list) {
                        if (list.length == 0) {
                            //$('#' + c_lp_id).val('');
                        }
                        return list;
                    }
                }
            });
            master_agent_products_typeahead.initialize();
            $('#' + current_handler).typeahead(null, {
                displayKey: "name",
                source: master_agent_products_typeahead.ttAdapter(),
                templates: {empty: "<div> No matching products found </div>"}
            });
            $('#' + current_handler).on('typeahead:selected', function (event, datum, name) {
                // $('#' + c_lp_id).val(datum.id);
                show_options(c_p_type);
                create_fields(c_p_id, c_p_type, c_container, c_btn, datum.id, datum.name);
            });
        };
        initialize_master_agent_products_typeahead();
    });

    function show_options(type) {
        if (type == 'compatible') {
            $('#subsidize_rent_lease_options').removeClass('hide');
        }
    }

    function create_fields(c_p_id, c_p_type, c_p_container, c_btn, c_lp_id, c_lp_name){

        var randomNumber = randomNumberFromRange(300, 400);

        console.log(c_p_id);
        console.log(c_p_type);
        console.log(c_p_container);
        console.log(c_btn);
        console.log(c_lp_id);
        console.log(c_lp_name);

        $("#" + c_btn).removeAttr('disabled', false);

        var item_container = $('<div/>', {'class': "div_" + randomNumber});

        $('<input>').attr({
            type: 'hidden',
            name: "product[linked_products_attributes]["+randomNumber+"][product_id]",
            value: c_p_id
        }).appendTo(item_container);

        $('<input>').attr({
            type: 'hidden',
            name: "product[linked_products_attributes]["+randomNumber+"][linked_product_id]",
            value: c_lp_id
        }).appendTo(item_container);

        $('<input>').attr({
            type: 'hidden',
            name: "product[linked_products_attributes]["+randomNumber+"][link_type]",
            value: c_p_type
        }).appendTo(item_container);

        $('<input>').attr({
            type: 'hidden',
            name: "product[linked_products_attributes]["+randomNumber+"][name]",
            value: c_lp_name
        }).appendTo(item_container);

        $("#" + c_p_container).append(item_container);

    }

    function randomNumberFromRange(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }