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>