Minimal symbols amount for data upload in autocomplete

问题

I'm trying to create city autocomplete in checkout, but the problem is that amount of data that being sent is too large. So i was thinking about uploading data only after certain amount of symbols typed in field, lets say 3.

But I don't know how to do this using native bindingHandlers.

Here is js file:

    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);
                }
            });
        }
    });
});

template:

<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
    }" />

Currently this code is working and i'm getting autocomplete result as expected. But the number of results returned by ajax is too large. This is why i need to start uploading data after at least 3 symbols was entered.

来源：https://stackoverflow.com/questions/56608560/minimal-symbols-amount-for-data-upload-in-autocomplete