Documentation
JavaScript Quickstart
Note: this is for development and demonstration purposes only. RapidAPI Keys and Client IDs in the below examples will be visible in client-side code, which may or may not meet your implementation needs.
You can easily add Domainr-style instant search to your web and app projects via JavaScript (and optionally, jQuery). The code is available from CDNJS, NPM, or GitHub.
Steps
- Get an API key from RapidAPI, or a
client_id
(for high-volume commercial users). - Via CDNJS, include
domainr-search-box.min.js
anddomainr-search-box.css
in your page (or host these files yourself). - Add an empty
div
under yourinput
element; the Domainr Search Box will fill it with results. - Configure the search box, customizing as needed.
- Style the results accordingly, via CSS.
Note: If you wish to keep your RapidAPI API key secret, you can proxy Domainr API requests through a server you control. In this example the key is published in client-side code, and thus visible (e.g. via browser developer tools) to your site’s visitors, and could be compromised.
Example
Copy and paste this example code to a local html file, enter your RapidAPI Key or Client ID in the "configure" section at the bottom, and the search box should work.
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Simple Domainr Search Demo</title> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- simple API CSS styling, via CDNJS --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/domainr-search-box/0.0.22/domainr-search-box.css" /> <!-- more style tweaks --> <style> body { text-align: center; } body, input { font-family: 'helvetica neue', helvetica, sans-serif; font-size: 18px; } #example { position: relative; width: 320px; margin: 40px auto; text-align: left; } #example input { box-sizing: border-box; width: 100%; border: 1px solid #ccc; border-radius: 2px; padding: 3px 10px; appearance: none; } #example input:focus { outline: none; } #results { position: relative; width: 100%; } </style> </head> <body> <div id="example"> <h1>Simple Domainr Search Demo</h1> <!-- search box input --> <input type="text" id="search" name="search" placeholder="search all domains" autocomplete="off" autofocus autocapitalize="off" autocorrect="off" /> <!-- search results div, which will be populated --> <div id="results"></div> </div> <!-- include the JS, via CDNJS --> <script src="//cdnjs.cloudflare.com/ajax/libs/domainr-search-box/0.0.22/domainr-search-box.min.js"></script> <!-- configure the search box --> <script> new domainr.SearchBox({ mashapeKey: 'yourRapidAPIKey', // clientId: 'yourClientId', // or alternatively your clientId (for high-volume customers), in which case you don't need a RapidAPI key observe: document.getElementById('search'), renderTo: document.getElementById('results'), limit: 10, // limit to 10 results registrar: 'dnsimple.com', // only return a registrar's supported TLDs defaults: ['coffee', 'rocks', 'co', 'io'], // include these TLDs by default onSelect: function(result) { window.open('https://api.domainr.com/v2/register?registrar=dnsimple.com&domain=' + result.domain) }, }) </script> </body></html>