Search box and external API


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




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


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:


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


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

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

I followed @romanmg video : 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.


Here is a code that can help

<!DOCTYPE html>
<html lang="es">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        .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;
    <div class="search-container">
        <input type="text" id="searchbox" placeholder="Buscar..." onkeyup="showResults(this.value)" onchange="updateURL()">
        <div id="results" class="results-dropdown"></div>
        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';

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

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

            if (matchedResults.length === 0) {
       = 'none';

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

   = '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);

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