Autocomplete com plugin JS e JSON

[avallon-azevedo 0]

Bom dia amigos programadores, espero que estejam todos bem.

 

Preciso de uma ajuda urgente para criar um sistema de autocomplete para um projeto que estou fazendo.

 

Funciona assim: é um sistema de busca de passagens aéreas, no estilo decolar.com . Mas um pouco mais simples. O usuário começa a digitar o local que quer de origem, aí aparece o sistema de autocomplete. Esse sistema de autocomplete está sendo feito com o plugin jQuery typeahead (https://twitter.github.io/typeahead.js/). E os locais estão sendo puxados de um json (que vou por logo abaixo). Quando o usuário clica no local que ele escolher, existe dois campos do tipo hidden, um para o slug do local e outro para o ID do local, todos puxados do json. Assim, quando o usuário clica, automaticamente o formulário preenche os dois campos abaixo. O mesmo acontece quando o usuário preenche o o local de volta - funciona exatamente do mesmo jeito. O formulário passa as informações via GET.

 

Segue os códigos:

<form method="GET" id="homeSearch" data-base-action="/es/buscar/city_1876/city_1794/" novalidate="novalidate">
                            <ul class="lp-holder-fields">
                            
                                <li class="lp-column full">
                                    <label class="lb-form" for="originPlace">Origen:</label>
                                    <input id=" " name="searchBox[originPlace]" placeholder="Seleccione su origen" type="text" tabindex="1" autocomplete="off" class="input_lup searchInput" value="">
                                    
                                    <input id="originPlaceId" type="hidden" value="">

                                    <input id="originPlaceSlug" type="hidden" value="">
                                </li>
                                
                                <li class="lp-column full">
                                    <label class="lb-form" for="destinationPlace">Destino:</label>
                                    <input id="destinationPlace" name="searchBox[destinationPlace]" placeholder="Seleccione su destino" type="text" tabindex="2" class="input_lup searchInput" autocomplete="off" value="">
                                    <input id="destinationPlaceId" type="hidden" value="">
                                    <input id="destinationPlaceSlug" type="hidden" value="">
                                </li>
                                
                                <li class="lp-column full">
                                    <label class="lb-form" for="departureDate">Salida:</label>
                                    <input type="text" placeholder="Fecha de ida" id="departureDate" name="searchBox[departureDate]" class="datepicker input_date searchInput fixIE_searchDepartureHome" tabindex="3" autocomplete="off" value="">
                                    <input type="hidden" id="departureDateHdn" name="ida" value="">
                                </li>
                                
                                <li class="lp-column full">
                                    <label class="lb-form" for="returnDate">Regreso <small>(opcional)</small>:</label>
                                    <input type="text" placeholder="Opcional" id="returnDate" name="searchBox[returnDate]" class="datepicker input_date searchInput" tabindex="4" autocomplete="off" value="">
                                    <input type="hidden" id="returnDateHdn" name="volta" value="">
                                </li>
                                
                                <li>
                                    <button tabindex="5" id="btn-search" class="search_tickets"><span class="i_search"></span><span>Buscar Boletos</span></button>
                                </li>
                                
                            </ul>
                        </form>

Esse é o formulário (o projeto é em espanhol). Eu tenho o input "originPlace", que é onde o usuário preenche o local de origem e terá o autocomplete. Logo abaixo tem os dois inputs hidden que puxarão o slug e o ID desse local que o usuário escolher. O mesmo vale para o input "destinationPlace". Os outros inputs são para escolher data e, no momento, está tudo certo.

 

Segue o código javaScript junto com o JSON.

$(function() {
    try {
        $.datepicker.setDefaults($.datepicker.regional['es']);
    } catch (e) {}
    var originsSlugs = [];
    var $originPlace = $('#originPlace');
    var $destinationPlace = $('#destinationPlace');
    var placeListByName = [{

        "name": "Terminal,\x20Abasolo,\x20GTO",
        "slug": "abasolo\x2Dgto",
        "id": 5000,
        "isGroup": ""
    }, {
        "name": "Aeropuerto,\x20Guadalajara,\x20JAL",
        "slug": "aeropuerto\x2Dguadalajara\x2Djal",
        "id": 5001,
        "isGroup": ""
    }, {
        "name": "Aeropuerto\x20terminal\x201,\x20Ciudad\x20de\x20M\u00E9xico,\x20DF",
        "slug": "aeropuerto\x2Dmexico\x2Dterminal\x2D1\x2Dciudad\x2Dde\x2Dmexico\x2Ddf",
        "id": 5003,
        "isGroup": ""
    }, {
        "name": "Aeropuerto\x20terminal\x202,\x20Ciudad\x20de\x20M\u00E9xico,\x20DF",
        "slug": "aeropuerto\x2Dmexico\x2Dterminal\x2D2\x2Dciudad\x2Dde\x2Dmexico\x2Ddf",
        "id": 5004,
        "isGroup": ""
    }, {
        "name": "Terminal,\x20Aguascalientes,\x20AGS",
        "slug": "aguascalientes\x2Dags",
        "id": 5005,
        "isGroup": ""
    }, {
        "name": "Terminal,\x20Ahuacatl\u00E1n\x20de\x20Guadalupe,\x20QRO",
        "slug": "ahuacatlan\x2Dde\x2Dguadalupe\x2Dqro",
        "id": 5006,
        "isGroup": ""
    },];
    

    var hashTable = {};
    var orderedPlaceList = {};
    for (var x = 0; x < placeListByName.length; x++) {
        orderedPlaceList[x] = placeListByName[x].name;
        hashTable[placeListByName[x].name] = placeListByName[x];
    }
    var originPlaceNames = _.uniq(_.flatten(_.values(orderedPlaceList)))
    try {
        var originPlaceSlug = $.trim($('#originPlaceSlug').val()),
            destinationPlaceSlug = $.trim($('#destinationPlaceSlug').val());
        if (originPlaceSlug) {
            var originPlaceSlugEntity = _.findWhere(placeListByName, {
                slug: originPlaceSlug
            });
            if (!originPlaceSlugEntity) {
                $('#originPlace').val('');
                $('#originPlaceId').val('');
                $('#originPlaceSlug').val('');
            }
        }
        if (destinationPlaceSlug) {
            var destinationPlaceSlugEntity = _.findWhere(placeListByName, {
                slug: destinationPlaceSlug
            });
            if (!destinationPlaceSlugEntity) {
                $('#destinationPlace').val('');
                $('#destinationPlaceId').val('');
                $('#destinationPlaceSlug').val('');
            }
        }
    } catch (e) {}
    var typeaheadSorter = function(items) {
        var originalPlaces = _.map(items, function(item) {
            return hashTable[item];
        });
        var orderedItemsByIsGroup = _.sortBy(originalPlaces, function(originPlace) {
            return originPlace.isGroup === '' ? 1 : 0;
        });
        return _.pluck(orderedItemsByIsGroup, 'name');
    }
    $originPlace.typeahead({
        source: originPlaceNames,
        matcher: function(item) {
            var cleanItem = removeDiacritics(item).toLowerCase();
            var cleanQuery = removeDiacritics(this.query).toLowerCase();
            var result = (cleanItem.indexOf(cleanQuery) === 0 || cleanItem.search(cleanQuery) >= 0);
            return result;
        },
        updater: function(item) {
            var city = null;
            if ($.trim(item) !== '') {
                city = _.findWhere(placeListByName, {
                    name: item
                });
            }
            if (city) {
                $('#originPlaceId').val(city.id);
                $('#originPlaceSlug').val(city.slug);
            } else {
                $('#originPlaceId').val(0);
                $('#originPlaceSlug').val('');
                $(this).val('');
            }
            return item;
        },
        sorter: typeaheadSorter
    });
    $destinationPlace.typeahead({
        source: originPlaceNames,
        matcher: function(item) {
            var cleanItem = removeDiacritics(item).toLowerCase();
            var cleanQuery = removeDiacritics(this.query).toLowerCase();
            var result = (cleanItem.indexOf(cleanQuery) === 0 || cleanItem.search(cleanQuery) >= 0);
            return result;
        },
        updater: function(item) {
            var city = null;
            if ($.trim(item) !== '') {
                city = _.findWhere(placeListByName, {
                    name: item
                });
            }
            if (city) {
                $('#destinationPlaceId').val(city.id);
                $('#destinationPlaceSlug').val(city.slug);
            } else {
                $('#destinationPlaceId').val(0);
                $('#destinationPlaceSlug').val('');
                $(this).val('');
            }
            return item;
        },
        sorter: typeaheadSorter,
        header: "teste"
    });
    var getDestinations = function(city) {
        if (window.isAutoCompleteEnabled) {
            var adjacencylist = $.ajax({
                url: "/es/adjacencylistplace",
                method: "GET",
                data: {
                    "parameter": "departure",
                    "placeId": city.id
                },
                dataType: "json"
            });
            adjacencylist.done(destinationList);
        }
    };
    var originPlaceHandler = function() {
        var $this = $(this);
        var resultOriginPlaceName = $this.val();
        if (!resultOriginPlaceName) {
            return false;
        }
        var city = null;
        if ($.trim(resultOriginPlaceName) !== '') {
            city = _.findWhere(placeListByName, {
                name: resultOriginPlaceName
            });
        }
        if (city) {
            if (city.isGroup == "1") {
                $('#isGroup').val(0);
            }
            $('#originPlaceId').val(city.id);
            $('#originPlaceSlug').val(city.slug);
            getDestinations(city);
        } else {
            $('#originPlaceId').val(0);
            $('#originPlaceSlug').val('');
            $(this).val('');
        }
    };
    var destinationList = function(ids) {
        var routesList;
        routesList = routesToPlacesList(ids).sort();
        $destinationPlace.typeahead().data('typeahead').source = routesList;
    };
    var routesToPlacesList = function(routesList) {
        var placesList, placeListId;
        placeListId = _.indexBy(placeListByName, 'id');
        placesList = _.map(routesList, function(route) {
            if (typeof placeListId[route.arrival] !== 'undefined') {
                return placeListId[route.arrival].name;
            }
        });
        originsSlugs = _.map(routesList, function(route) {
            return {
                "departure_slug": route.departure_slug,
                "id": route.arrival
            };
        });
        return placesList;
    };
    $originPlace.bind('blur', originPlaceHandler);
    $destinationPlace.bind('blur', function() {
        var cityName = $(this).val(),
            city = null;
        if (cityName !== '') {
            city = _.findWhere(placeListByName, {
                name: cityName
            });
        }
        if (city) {
            if (window.isAutoCompleteEnabled) {
                var slugGroup = _.findWhere(originsSlugs, {
                    id: city.id
                });
                if ($('#originPlaceSlug').val() != slugGroup.departure_slug) {
                    $('#isGroup').val(1);
                }
                $('#originPlaceSlug').val(slugGroup.departure_slug);
            }
            if (city.isGroup == "1") {
                $('#isGroup').val(0);
            }
            $('#destinationPlaceId').val(city.id);
            $('#destinationPlaceSlug').val(city.slug);
        } else {
            $('#destinationPlaceId').val(0);
            $('#destinationPlaceSlug').val('');
            $(this).val('');
        }
    });
});

Logo no começo temos o json com as informações dos locais etc. Coloquei apenas alguns de exemplo para não estender tanto o código. Na parte de baixo temos o código que faz funcionar a passagens dos dados para o input hidden quando o usuário seleciona o local e também o código do autocomplete.

 

No momento está funcionando perfeitamente - o problema é que eu preciso fazer uma alteração nesse código que não estou conseguindo. Eu preciso separar a exibição do autocomplete em dois - em Cidades (Ciudades) e Aeroportos (Aeropuertos). Lembrando que estou usando o plugin typeahead. Basicamente eu preciso fazer o mesmo que está nesse link (https://twitter.github.io/typeahead.js/examples/) lá na parte de "Multiple Datasets". O problema é que não consigo de jeito nenhum fazer isso funcionar. Já tentei vários exemplos e já estou desesperado. Alguém pode me ajudar, por favor?

 

Agradeço de todo coração!