# Search box and external API

**URL:** <https://forum.bubble.io/t/search-box-and-external-api/26661>\
**Category:** APIs\
**Created:** [March 28, 2018, 8:33am UTC](https://forum.bubble.io/t/search-box-and-external-api/26661 "2018-03-28T08:33:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aditya.rajak](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aditya.rajak/32/40586_2.png) [@aditya.rajak](https://forum.bubble.io/u/aditya.rajak)\
**Post date:** [March 28, 2018, 8:33am UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/1 "2018-03-28T08:33:57Z")

</div>

Hello,

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

Thanks,  
Aditya

---

<div class="post-metadata">

**Author:** ![baeramir](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/baeramir/32/48369_2.png) [@baeramir](https://forum.bubble.io/u/baeramir)\
**Post date:** [October 22, 2019, 8:56am UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/2 "2019-10-22T08:56:26Z")

</div>

Hi!

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

🙏  
Amir

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [October 22, 2019, 4:51pm UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/3 "2019-10-22T16:51:42Z")

</div>

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](https://www.youtube.com/watch?v=gF8mpZtfWLU)

Cheers,  
Gaby

Coaching No Code Apps  
[Join our Facebook group](https://www.facebook.com/groups/1165236046981865/) for insider access to no-code development  
Get professional [development services](https://coachingnocodeapps.com/services)  
Enroll in expert-led [courses and products](https://coachingnocodeapps.com/resources)

---

<div class="post-metadata">

**Author:** ![korolov59](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@korolov59](https://forum.bubble.io/u/korolov59)\
**Post date:** [March 19, 2020, 1:26pm UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/4 "2020-03-19T13:26:36Z")

</div>

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))

---

<div class="post-metadata">

**Author:** ![RobAtMeetSunday](https://avatars.discourse-cdn.com/v4/letter/r/977dab/32.png) [@RobAtMeetSunday](https://forum.bubble.io/u/RobAtMeetSunday)\
**Post date:** [August 28, 2020, 2:07am UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/5 "2020-08-28T02:07:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adam.faik.pm](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adam.faik.pm/32/81231_2.png) [@adam.faik.pm](https://forum.bubble.io/u/adam.faik.pm)\
**Post date:** [January 3, 2021, 2:32pm UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/6 "2021-01-03T14:32:19Z")

</div>

Hi,  
I followed @romanmg video : [https://www.youtube.com/watch?v=gF8mpZtfWLU](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](https://us1.discourse-cdn.com/bubble/original/3X/0/5/059f82d37da98c33d26a0f6827b5bbef13c39593.png)

---

<div class="post-metadata">

**Author:** ![operacionesnativo](https://avatars.discourse-cdn.com/v4/letter/o/ce73a5/32.png) [@operacionesnativo](https://forum.bubble.io/u/operacionesnativo)\
**Post date:** [October 1, 2023, 3:47am UTC](https://forum.bubble.io/t/search-box-and-external-api/26661/8 "2023-10-01T03:47:55Z")

</div>

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