Algolia Places is closing. We can help.

Multiple data sources demo

Introduction #

Instantly search multiple sources of data at the same time. This demo searches our places index and static JSON containing restaurant records.

View live on CodePen

HTML # 

            
<html>

    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"/>
    </head>

    <body>

        <div id="search-container"></div>

        <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
        <script src="/assets/js/app.js"></script>

    </body>
</html>

CSS # 

            
body {
    background: black;
    color: white;
    padding-top: 60px;
}
    
p {
    margin: 0;
}
    
.algolia-autocomplete {
    width: 100%;
}
    
.algolia-autocomplete .aa-input,
.algolia-autocomplete .aa-hint {
    width: 100%;
}
    
.algolia-autocomplete .aa-hint {
    color: #999;
}
    
.algolia-autocomplete .aa-dropdown-menu {
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
    border-top: none;
}
    
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
    cursor: pointer;
    padding: 5px 4px;
}
    
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
    background-color: #b2d7ff;
}
    
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
    font-weight: bold;
    font-style: normal;
}
    
.aa-Source:first-child {
    margin-bottom: 20px;
}
    
.aa-Source:last-child .aa-Item {
    background: #137FA2;
    color: #ffffff;
    margin-bottom: 10px;
    padding: 10px;
}
    
.aa-Source:last-child .aa-Item:hover,
.aa-Source:last-child .aa-Item[aria-selected="true"] {
    color: #dddddd;
}
    
#search-container {
    margin-top: 30px;
}

JavaScript # 

            
const { autocomplete, getAlgoliaResults } = window["@algolia/autocomplete-js"];

const searchClient = algoliasearch(
    "DM340JGS49",
    "YOUR_PLACESAPI_KEY_HERE"
);

autocomplete({
    container: "#search-container",
    detachedMediaQuery: "none",
    placeholder: "Search for places...",
    getSources() {
        return [{
            sourceId: "places",
            getItems({ query }) {
                return getAlgoliaResults({
                    searchClient,
                    queries: [
                        {
                            indexName: "places",
                            query,
                            params: {
                                aroundLatLng: "51.6, 0",
                                aroundRadius: 3000000,
                            },
                        },
                    ],
                });
            },
            templates: {
                item({ item }) {
                    return `${item.name}, ${item.county}, ${item.country}`;
                },
            },
        },
        {
            sourceId: "restaurants",
            getItems({ query }) {
                return [
                {
                    label: "McDowell's Clerkenwell",
                    info: "Where hungry developers go to feed.",
                },
                {
                    label: "McDowell's Ealing",
                    info: "Come on down for the best deals in Ealing.",
                },
                {
                    label: "McDowell's Epsom",
                    info: "The golden arcs await in Epsom.",
                },
                {
                    label: "McDowell's Lewisham",
                    info: "Burgers and more in Lewisham.",
                },
                {
                    label: "McDowell's Peckham",
                    info: "New York, Paris, Peckham.",
                },
                {
                    label: "McDowell's Tottenham",
                    info: "Open late every day, the best food in Tottenham.",
                },
                {
                    label: "McDowell's Twickenham",
                    info: "Daily specials for the best food in Twickenham.",
                },
                {
                    label: "McDowell's Walthamstow",
                    info: "East London's flagship McDowell's restaurant.",
                },
                {
                    label: "McDowell's Westminster",
                    info: "The city's finest burgers in Westminster.",
                },
                ].filter(({ label }) =>
                    label.toLowerCase().includes(query.toLowerCase()));
            },
            templates: {
                item({ item }) {
                    return `${item.label} - ${item.info}`;
                },
            },
        }];
    },
});