Минимальное количество символов для загрузки данных при автозаполнении - PullRequest
Новая
       25

Минимальное количество символов для загрузки данных при автозаполнении

0 голосов
/ 15 июня 2019

Я пытаюсь создать автозаполнение города при оформлении заказа, но проблема в том, что отправляемый объем данных слишком велик. Поэтому я думал о загрузке данных только после того, как определенное количество символов набрано в поле, скажем, 3.

Но я не знаю, как это сделать с помощью native bindingHandlers.

Вот файл js: 

    define([
    'Magento_Ui/js/form/element/abstract',
    'mage/url',
    'ko',
    'jquery',
    'jquery/ui'
], function (Abstract, url, ko, $) {
    'use strict';

    ko.bindingHandlers.shippingAutoComplete = {
        init: function (element, valueAccessor) {
            Promise.resolve(
                $.ajax({
                    type: 'POST',
                    url: url.build('ajax/url/here/'),
                    dataType: 'json'
                })
            ).then(function (result_list) {
                var settings = valueAccessor();

                var selectedOption = settings.selected;
                var options =  JSON.parse(result_list);
                var updateElementValueWithLabel = function (event, ui) {
                    // Stop the default behavior
                    event.preventDefault();
                    $(element).val(ui.item.label);

                    if (typeof ui.item !== "undefined") {
                        selectedOption(ui.item);
                    }
                };

                $(element).autocomplete({
                    source: options,
                    select: function (event, ui) {
                        updateElementValueWithLabel(event, ui);
                    }
                });

            });
        }
    };

    return Abstract.extend({
        selectedDepartment: ko.observable(''),
        selectedCity: ko.observable(''),
        postCode: ko.observable(''),
        getCities: function ( request, response ) {
            var departmentValue = $('[name="region"]').val();
            $.ajax({
                url: url.build('ajax/url/here/'),
                data: JSON.stringify({
                    q: request.term,
                    filter: departmentValue
                }),
            contentType: "application/json",
            type: "POST",
            dataType: 'json',
            error : function () {
                alert("An error have occurred.");
            },
                success : function (data) {
                    var items = JSON.parse(data);
                    response(items);
                }
            });
        }
    });
});

шаблон: 

<input class="input-text" type="text" data-bind="
    shippingAutoComplete: {
        selected: selectedCity,
    },
    event: {change: userChanges},
    value: value,
    valueUpdate: 'blur',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid
    }" />

В настоящее время этот код работает, и я получаю результат автозаполнения, как и ожидалось. Но число результатов, возвращаемых ajax, слишком велико. Вот почему мне нужно начать загрузку данных после того, как были введены как минимум 3 символа.

...