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

  1. Get an API key from RapidAPI, or a client_id (for high-volume commercial users).
  2. Via CDNJS, include domainr-search-box.min.js and domainr-search-box.css in your page (or host these files yourself).
  3. Add an empty div under your input element; the Domainr Search Box will fill it with results.
  4. Configure the search box, customizing as needed.
  5. 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>