JQuery  

Crypto search bar with autocomplete

Introduction

Cryptocurrency dashboards often include a search feature that allows users to quickly find information about digital assets. Major platforms such as CoinMarketCap and CoinGecko provide a search bar that instantly suggests coins while the user types. This feature is called autocomplete or type-ahead search.

A crypto search bar improves user experience by helping users quickly locate cryptocurrencies like Bitcoin, Ethereum, and Solana without manually scrolling through long lists of coins.

This article explains the full concept and implementation of a crypto search bar with autocomplete using ASP.NET Web API for the backend and JavaScript for the frontend.

Understanding the Autocomplete Search Concept

Autocomplete works by sending partial text entered by the user to a server or API. The server returns a list of matching cryptocurrencies, which are then displayed as suggestions below the search input.

The process works as follows:

  • User types "bit" in the search box

  • Frontend sends request to backend API

  • Backend calls external crypto API

  • API returns matching coins such as Bitcoin

  • Frontend displays suggestions in dropdown list

This feature allows users to quickly find the coin they are looking for without typing the full name.

Crypto Search API

The API endpoint used for searching coins from the CoinGecko database is:

https://api.coingecko.com/api/v3/search?query=bitcoin

Example JSON Response

{
 "coins":[
  {
   "id":"bitcoin",
   "name":"Bitcoin",
   "symbol":"btc",
   "market_cap_rank":1
  },
  {
   "id":"bitcoin-cash",
   "name":"Bitcoin Cash",
   "symbol":"bch",
   "market_cap_rank":25
  }
 ]
}

The response contains matching cryptocurrencies based on the search query.

Backend Implementation Using ASP.NET Web API

The backend API receives the search keyword and forwards it to the CoinGecko search API.

CryptoSearchController.cs

using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;

namespace CryptoDashboard.Controllers
{
    public class CryptoSearchController : ApiController
    {
        [HttpGet]
        [Route("api/crypto/search")]
        public async Task<IHttpActionResult> SearchCoin(string query)
        {
            if (string.IsNullOrEmpty(query))
                return BadRequest("Query cannot be empty");

            string url = "https://api.coingecko.com/api/v3/search?query=" + query;

            using (HttpClient client = new HttpClient())
            {
                var response = await client.GetAsync(url);

                if (!response.IsSuccessStatusCode)
                    return BadRequest("Unable to fetch crypto search results");

                string result = await response.Content.ReadAsStringAsync();

                return Ok(result);
            }
        }
    }
}

Explanation of Backend Logic

The controller receives the search text entered by the user. It then calls the CoinGecko search API and returns the JSON response to the frontend. This allows the application to control API calls and optionally filter or cache results.

Frontend Implementation (HTML + JavaScript)

The frontend contains a search input field that triggers API requests while the user types.

index.html

<!DOCTYPE html>
<html>
<head>

<title>Crypto Search</title>

<style>

body{
font-family:Arial;
background:#f4f6f9;
text-align:center;
}

.container{
width:400px;
margin:auto;
margin-top:100px;
}

input{
width:100%;
padding:10px;
font-size:16px;
}

.suggestions{
background:white;
border:1px solid #ddd;
text-align:left;
}

.item{
padding:10px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.item:hover{
background:#f2f2f2;
}

</style>

</head>

<body>

<div class="container">

<h2>Search Cryptocurrency</h2>

<input type="text" id="searchBox" placeholder="Search coin..." onkeyup="searchCoin()" />

<div id="suggestions" class="suggestions"></div>

</div>

<script>

function searchCoin()
{
let query = document.getElementById("searchBox").value;

if(query.length < 2)
{
document.getElementById("suggestions").innerHTML="";
return;
}

fetch("/api/crypto/search?query=" + query)
.then(res => res.json())
.then(data => {

let result = JSON.parse(data);

let coins = result.coins;

let html="";

for(let i=0;i<coins.length;i++)
{
let coin = coins[i];

html += `<div class="item">${coin.name} (${coin.symbol.toUpperCase()})</div>`;
}

document.getElementById("suggestions").innerHTML = html;

});

}

</script>

</body>
</html>

How the Autocomplete Search Works

When the user types in the search box, the JavaScript function is triggered. The function sends a request to the backend API with the entered keyword. The backend retrieves matching coins from CoinGecko and sends them back to the frontend. The frontend then dynamically creates suggestion items and displays them below the search input.

Features of the Crypto Search Bar

  • Instant cryptocurrency suggestions

  • Real-time search results

  • Autocomplete dropdown

  • Simple and responsive UI

  • Integration with free crypto APIs

Possible Improvements

The search feature can be extended with additional capabilities to match professional crypto dashboards.

  • Add coin icons in the search suggestions

  • Display market cap rank in the dropdown

  • Add keyboard navigation for suggestions

  • Redirect to coin detail page when clicked

  • Cache results for faster searching

Use Cases of Crypto Autocomplete Search

  • Crypto trading dashboards

  • Portfolio management tools

  • Market analysis platforms

  • Blockchain research portals

  • Crypto news websites

Conclusion

A cryptocurrency autocomplete search bar greatly improves the usability of crypto dashboards. By integrating a backend API with frontend JavaScript, developers can create a fast and interactive search system similar to those used by major crypto platforms. Using free APIs from CoinGecko makes it easy to build scalable search features without managing large cryptocurrency databases locally.

Membership not found