Search box and external API

Need help APIs
1

Hello,

How can I bring data from an external API in a Bubble search box?

Thanks,
Aditya

2 Likes
2

Hi!

I’m also interested in this, can anybody help out?

:pray:
Amir

3

Hi @baeramir, as far as I know, the Search Box element doesn’t let you choose a dynamic type that comes from an external API. My suggestion would be to build your own custom search box using a regular input and a repeating group.

You can set the type of content and data source of the repeating group to an external API and filter the results using the input’s content.

Take a look at this tutorial as it walks you through how to do this with User data, but you can apply it to external API: https://www.youtube.com/watch?v=gF8mpZtfWLU

Cheers,
Gaby

Coaching No Code Apps
Join our Facebook group for insider access to no-code development
Get professional development services
Enroll in expert-led courses and products

6 Likes
4

Hi Gaby. Huge fan btw)) You mean like choose an API operator for the type of content?
But there is no an option like “Do a search for” in the Data source. Anything I choose for a data source is not allowed bu Bubble. I need to filter my repeating group results according to my algolia database. Can’t find a solution(( Looks like you have one))

1 Like
5

Bump for the concern above. ^^^
It looks like @korolov59 and myself have a similar issue.
Did you find any solution?

6

Hi,
I followed @romanmg video : https://www.youtube.com/watch?v=gF8mpZtfWLU very useful when the data is stored within the Bubble app.
For a data that comes from an API, I followed the same steps, but instead of using “Do a seach for”, I used “:filtred” in order to add constrains the dropdown list.

Screenshot 2021-01-03 at 15.31.59
Screenshot 2021-01-03 at 15.31.592416Ă—950 386 KB

4 Likes
8

Here is a code that can help

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .search-container {
            position: relative;
            width: 100%;
        }

        #searchbox {
            width: 100%;
            height: 48px;
            padding: 10px;
            box-sizing: border-box;
        }

        .results-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            box-sizing: border-box;
            z-index: 1000;
        }

        .results-dropdown div {
            padding: 10px;
            cursor: pointer;
        }

        .results-dropdown div:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" id="searchbox" placeholder="Buscar..." onkeyup="showResults(this.value)" onchange="updateURL()">
        <div id="results" class="results-dropdown"></div>
    </div>
    <script>
        let data = ["Resultado 1", "Resultado 2", "Resultado 3", "Resultado 4", "Resultado 5", "Resultado 6", "Resultado 7", "Resultado 8", "Resultado 9", "Resultado 10"];

        function selectResult(value) {
            document.getElementById("searchbox").value = value;
            document.getElementById("results").style.display = 'none';
            updateURL();
        }

        function showResults(query) {
            let resultsDiv = document.getElementById("results");
            resultsDiv.innerHTML = '';
            if (query === '') {
                resultsDiv.style.display = 'none';
                return;
            }

            let matchedResults = data.filter(item => item.toLowerCase().includes(query.toLowerCase())).slice(0, 10);

            if (matchedResults.length === 0) {
                resultsDiv.style.display = 'none';
                return;
            }

            matchedResults.forEach(item => {
                let div = document.createElement('div');
                div.innerText = item;
                div.onclick = () => selectResult(item);
                resultsDiv.appendChild(div);
            });

            resultsDiv.style.display = 'block';
        }

        function updateURL() {
            let queryValue = document.getElementById("searchbox").value;
            let currentURL = new URL(window.location.href);
            currentURL.searchParams.set("query", queryValue);
            let newURL = currentURL.toString();
            history.pushState({ path: newURL }, '', newURL);
        }
    </script>
</body>
</html>

1 Use an html element and paste the code
2 Inside substitute the JSON array on data variable for dynamic data with your list of results use :formatted as text
3 Read the selection on your url with the parameter query use the operator :get data from page url