$('.find-football-location').each(function () {
    $(this).autocomplete({
        create: function () {
            $('.ui-helper-hidden-accessible').remove();
        },
        source: function (request, response) {
            var _thisId = $('#' + $(this.element).prop('id'));
            var urlPath = window.location.protocol + '//' + window.location.hostname + '/api/findfootball/getpredictedresults?input=' + _thisId.val();

            $.ajax({
                url: urlPath,
                dataType: "json",
                data: {
                    searchText: request.term
                },
                success: function (data) {
                    if (data.Predictions == null) {
                        _thisId.closest('.autocomplete-group').find('.ui-autocomplete').empty().append('<li><span class="no-result">No results found</span></li>').show();
                    }
                    else {
                        response($.map(data.Predictions, function (item) {
                            return {
                                term: item.Text,
                                label: item.Type,
                                url: item.Url
                            };
                        }));
                    }
                },
                complete: function (data) {
                    _thisId.parent().toggleClass('ui-autocomplete-loading', !_thisId.parent().hasClass('ui-autocomplete-loading'));
                }
            });
        },
        minLength: 3,
        select: function (event, ui) {
            $(this).val(ui.item.term);
            if (ui.item.label !== 'Place') {
                return false;
            } else {
                event.preventDefault();
            }
        },
        search: function (event, ui) {
            var _thisId = $('#' + $(this).prop('id'));
            _thisId.parent().toggleClass('ui-autocomplete-loading', !_thisId.parent().hasClass('ui-autocomplete-loading'));
        },
        open: function (event, ui) {
            var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
            var acData = $(this).data('ui-autocomplete');

            acData.menu.element.find('a').each(function () {
                var searchMask = acData.term;
                var regEx = new RegExp(searchMask, "ig");
                var me = $(this);
                var res = regEx.exec(me.text());
                //var res = me.match(regEx);
                var styledTerm = termTemplate.replace('%s', res);
                var temp = me.text().replace(regEx, styledTerm);
                me.html(temp);
            });
        },
        focus: function (event, ui) {
            event.preventDefault();
        },
        appendTo: $(this).closest('.autocomplete-group').find('.autocomplete-group__results')
    })
    .data("ui-autocomplete")._renderItem = function (ul, item) {
        var temp = $("<li>")
            .addClass(item.label)
            .append("<a href=\"" + item.url + "\">" + item.term + "</span>")
            .appendTo(ul);
        return temp;
    };
});