Поиск похожих значений в API на основе данных локального хранилища и автоматическая вставка их в jquery поля автозаполнения

Question

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

, но я пытаюсь создать авто сценарий заполнения, чтобы заполнить форму на веб-сайте, который использует jquery поля автозаполнения с использованием данных локального хранилища (chrome).

поля ввода:

txtCityName // contains value and data-city-code (attr)
txtStreetName // contains value and data-street-code (attr)
txtHouseNo // contains value
txtZipCode // A fields that returns the Zip Code automatically based on the following:

$('#txtCityName').attr('data-city-code');
$('#txtStreetName').attr('data-street-code');
$('#txtHouseNo').val();

их jquery код автозаполнения:

var mycache = {
    cities: null,
    streets: null
};


$(function () {

    getCities($("#txtCityName"), $("#txtStreetName"));

    function getCities(txtCities, txtStreets) {

        var loader = txtCities.siblings('.input-loader');

        txtCities.autocomplete({
            source: function (request, response) {
                txtCities.attr('data-city-code', '');
                txtStreets.attr('data-city-code', '');

                if (mycache.cities != null) {
                    var re = $.ui.autocomplete.escapeRegex(request.term);
                    var matcher = new RegExp(/*"^" + */re, "i");
                    var filtered = $.grep(mycache.cities, function (item) { return matcher.test(item.label); });
                    response(filtered);
                    return;
                }

                loader.show();

                $.ajax({
                    url: "/api/Address/GetAllCities",
                    type: "GET",
                    dataType: "json",
                    cache: false,
                    data: { 'key': request.term },
                    success: function (data) {
                        mycache.cities = data;

                        var re = $.ui.autocomplete.escapeRegex(request.term);
                        var matcher = new RegExp(/*"^" + */re, "i");
                        var filtered = $.grep(mycache.cities, function (item) { return matcher.test(item.label); });  
                        response(filtered);
                    },
                    complete: function (xhr, status) { loader.hide(); }
                });

            },
            minLength: 1,
            autoSelect: true,
            selectFirst: true,
            focus: function (event, ui) {
                txtCities.val(ui.item.label);
                txtCities.attr('data-city-code', ui.item.value);
                txtStreets.attr('data-city-code', ui.item.value);
                event.preventDefault();
            },

            select: function (event, ui) {
                txtStreets.attr('data-street-code', "");
                txtStreets.val("");
                mycache['streets'] = null;
                event.preventDefault();
            },
            change: function (event, ui) {
                mycache['streets'] = null;
                txtStreets.attr('data-street-code', "");
                txtStreets.val("");

                if (ui.item != null) {
                    txtCities.val(ui.item.label);
                    txtCities.attr('data-city-code', ui.item.value);
                    txtStreets.attr('data-city-code', ui.item.value);
                    getStreetsByCity(txtStreets, ui.item.value);
                    checkStreetsExist(ui.item.value);
                } else if (txtCities.val().length > 0 && txtCities.attr('data-city-code').length > 0) {
                    var val = txtCities.attr('data-city-code');
                    txtStreets.attr('data-city-code', val);
                    getStreetsByCity(txtStreets, val);
                } else {
                    txtCities.val('');
                    txtCities.attr('data-city-code', "");
                    txtStreets.attr('data-has-streets', false);
                }
            }
        }).data('ui-autocomplete')._renderItem = function (ul, item) {
            var term = this.term.split(' ').join('|');
            var re = new RegExp("(" + term + ")", "gi");
            var t = item.label.replace(re, '<span class="highlight-text">$1</span>');
            return $("<li></li>")
               .data("item.autocomplete", item)
               .append(t)
               .appendTo(ul);
        };
    }
    function checkStreetsExist(cityCode) {

        addressType = $('input[name="AddressTypeSelector"]').filter(':checked').val()

        if (addressType != '1')
            return;

        $.ajax({
            url: "/api/Address/CheckStreetsExist",
            type: "GET",
            dataType: "json",
            cache: false,
            data: { 'CityCode': cityCode },
            success: function (data) {
                if (!data) {
                    // If nothing returned
                    $('#error-address-general-message').html('no streets available');
                    $('#error-address-general').show();
                }
                else
                    $('#error-address-general').hide();
            }
        });

    }
    function getStreetsByCity(txtStreets, cityCode) {

        console.log('getStreetsByCity... (cityCode=' + cityCode + ')');

        txtStreets.attr('data-street-code', '');
        var loader = txtStreets.siblings('.input-loader');

        txtStreets.autocomplete({
            source: function (request, response) {

                txtStreets.attr('data-street-code', '');

                var streets = mycache.streets;

                if (streets != null) {
                    var re = $.ui.autocomplete.escapeRegex(request.term);
                    var matcher = new RegExp(/*"^" + */re, "i");
                    var filtered = $.grep(streets, function (item) { return matcher.test(item.label); });
                    response(filtered);
                    return;
                }

                loader.show();

                $.ajax({
                    url: '/api/Address/GetStreetsByCity',
                    type: 'GET',
                    dataType: 'json',
                    data: { 'cityCode': cityCode },
                    success: function (data) {

                        streets = data;
                        var re = $.ui.autocomplete.escapeRegex(request.term);
                        var matcher = new RegExp('^' + re, 'i');
                        var filtered = $.grep(streets, function (item) { return matcher.test(item.label); });
                        response(filtered);
                        mycache['streets'] = data;

                        txtStreets.attr('data-has-streets', (data.length > 0));
                    },
                    complete: function (xhr, status) { loader.hide(); }
                });

            },
            minLength: 1,
            focus: function (event, ui) {
                txtStreets.val(ui.item.label);
                txtStreets.attr('data-street-code', ui.item.value);
                event.preventDefault();
            },
            select: function (event, ui) {
                txtStreets.val(ui.item.label);
                txtStreets.attr('data-street-code', ui.item.value);
                event.preventDefault();
            },
            change: function (event, ui) {

                // Get ZIP code
            }
        }).data('ui-autocomplete')._renderItem = function (ul, item) {
            var term = this.term.split(' ').join('|');
            var re = new RegExp("(" + term + ")", "gi");
            var t = item.label.replace(re, '<span class="highlight-text">$1</span>');
            return $("<li></li>")
               .data("item.autocomplete", item)
               .append(t)
               .appendTo(ul);
        };
    }

});

Как видите, поля автозаполнения jquery используют API для получения своих данных, и это выглядит примерно так:

<City>
<label>CityName</label>
<value>CityCode</value>
</City>

Далее они используя CityCode для получения списка улиц города из API Streets. Данные, которые у меня есть, являются только «меткой» для города и улицы, и они не на 100% точны по отношению к данным их API. поэтому я хочу найти в их API метку, наиболее похожую на ту, что есть в моем локальном хранилище, и записать их метку и значение.

Таким образом, результаты позволят мне вставить все захваченные значения в поля непосредственно через скрипт, чтобы ZipCode автоматически получал всю необходимую информацию и продолжал заполнять форму без проблем.

Например:

$("#txtCityName").val("CityName"); // after I captured the CityName label
$("#txtStreetName").val("StreetName"); // after I captured the StreetName label
$("#txtCityName").attr("data-city-code", "CityCode"); // after I captured the CityCode value
$("#txtStreetName").attr("data-street-code", "StreetCode"); // after I captured the StreetCode value

Надеюсь, это имеет какой-то смысл .. Спасибо !!