Git Product home page Git Product logo

domainr-search-box's Introduction

Domainr Search Box

Drop-in instant domain search for your site.

Installation

Make sure you have Node.js and NPM installed.

Run npm install domainr-search-box to create a local copy of the module.

Usage

From the dist/ directory, include domainr-search-box.min.js and domainr-search-box.css on your page.

Add an empty div underneath your input; the Domainr Search Box will fill it with results.

To authenticate, use the API for free via RapidAPI with your RapidAPI API key, or contact us regarding high-volume usage.

Plain JavaScript

var box = new domainr.SearchBox({
    mashapeKey: yourRapidAPIKey, // your RapidAPI API key
    // clientId: yourClientId, // your high-volume clientId; not needed if using RapidAPI
    observe: yourInputElement,
    renderTo: yourResultsElement,
    onSelect: function(result) { ... }
  });

jQuery

$('input#search')
  .domainrSearchBox({
    mashapeKey: yourRapidAPIKey, // your RapidAPI API key
    clientId: yourClientId, // or alternatively your Client ID; not needed if using RapidAPI
    renderTo: yourResultsElementOrSelector,
    onSelect: function(result) { ... }
  });

Reference

Plain JavaScript

SearchBox

Create a domainr.SearchBox with new domainr.SearchBox(options). The options argument is an object with the following possible properties:

  • clientId: Either this or mashapeKey are required.
  • mashapeKey: Either this or clientId are required.
  • observe: The DOM element to observe.
  • renderTo: The DOM element to contain the rendered autocomplete.
  • renderWith: A function that will render the autocomplete. It will receive a state object.
  • limit: A number for the max number of results to display. Optional; default = 20.
  • registrar: Registrar or Registry domain name, to limit search results to domains supported by a registrar or registry. e.g. namecheap.com or donuts.co
  • defaults: Include the given default zones (an array of strings) in your search, e.g. ["coffee", "cafe", "organic"]. Results will be sorted according to the order of this array.
  • searchDelay: How many milliseconds after keyboard entry before the search is made (to avoid redundant network traffic). Optional; default = 250.
  • onSelect: An optional function to be called when the user selects a domain (if omitted, a new window will open with a recommended registrar for that result). Receives a single object with these properties:
    • domain
    • host
    • path
    • registerURL
    • status
    • subdomain
    • zone

Client

Create a domainr.Client with new domainr.Client(options). The options argument is an object with the following possible properties:

  • clientId: Either this or mashapeKey are required.
  • mashapeKey: Either this or clientId are required.
  • baseURL: Optional.

The domainr.Client has the following methods:

  • search(params, callback): Search with the given params and call the callback with the results upon completion. The params argument is an object with the following possible properties:
    • defaults: Comma-delimited string, e.g. coffee,cafe,organic
    • location: String, e.g. de
    • query: String.
    • registrar: String, e.g. namecheap.com or donuts.co
  • status(domains, callback): Call the status API with the given domains (an array) and call the callback with the results upon completion.
  • options(domain, callback): Call the options API with the given domain (a string) and call the callback with the results upon completion.
  • zones(callback): Call the zones API and call the callback with the results upon completion.
  • registerURL(domain, options): Returns a URL for registering the given domain (a string). The options parameter is an object; currently one property is accepted, registrar, to specify a specific registrar.

jQuery

Select the element you want to observe and call .domainrSearchBox(options) on it. Possible options include:

  • clientId: Either this or mashapeKey are required.
  • mashapeKey: Either this or clientId are required.
  • renderTo: Specification for which element to contain the rendered autocomplete. Can be anything jQuery will accept (selector, element, jQuery object).
  • renderWith: A function that will render the autocomplete. It will receive a state object.
  • limit: A number for the max number of results to display. Optional; default = 20.
  • registrar: Registrar or Registry domain name, to limit search results to domains supported by a registrar or registry. e.g. namecheap.com or donuts.co
  • defaults: Include the given default zones (an array of strings) in your search, e.g. ["coffee", "cafe", "organic"]. Results will be sorted according to the order of this array.
  • searchDelay: How many milliseconds after keyboard entry before the search is made (to avoid redundant network traffic). Optional; default = 250.
  • onSelect: An optional function to be called when the user selects a domain (if omitted, a new window will open with a recommended registrar for that result). Receives a single object with these properties:
    • domain
    • host
    • path
    • registerURL
    • status
    • subdomain
    • zone

Development

You'll need to have Node and Gulp installed.

  • npm install -g gulp to install Gulp.
  • npm install to install dependencies
  • gulp build to build the code.
  • gulp watch to watch the code, building on changes.
    • note: console output will appear when files are changed
  • gulp builds + watch, and runs the demo in a webpage.

Publishing new versions

  • Always increment the version
  • npm whoami to see your current npm user
  • npm publish to publish it

Note that the demo requires the code to be built. Also, you'll need to get a mashapeKey or clientId and set up a config.js; instructions are in index.html.

ยฉ 2018 nb.io, LLC

domainr-search-box's People

Contributors

1gb avatar case avatar cee-dub avatar connyay avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar dubcanada avatar iangilman avatar ydnar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

domainr-search-box's Issues

add support for priced status

Things:

  • add support for the priced status, probably in index.css
  • these should be "For sale" with a green background:
    • 0-0-n.com
    • 0-0.link
    • 0-0-7.com
    • 007military.com
    • militaryzones.com

Be able to trigger an update manually

I was just working on a project where I wanted to start the search box off already populated with a potential domain. I put the domain in the input as a value, but the search box didn't pick up on it.

One possible fix is to check to see if the input is non-empty when the search box is created and automatically do a search right away.

Also, perhaps we want to expose an "update for new input" method on the search box to cover additional edge cases. This could be as simple as aliasing _input which does the right thing but isn't a terribly clear name, and with the underscore it's marked as being private.

add support for reserved status

e.g. face.uk โ€” domainr.com shows it as reserved, but the search-box results are showing it as available.

It should appear as color: #006699;, just like the active and claimed statuses.

Switch to Yarn

Our other JS projects use Yarn, so we should probably move this over as well (instead of upgrading to Gulp 4).

Support for emoji domains

When typing emoji characters into the search box or clicking a domain with emojis in the name, Domainr seems to throw HTTP 401 and 500 errors (see "๐ŸŽˆ" example in screenshots below).

It would be nice if it supported emoji domains as they are becoming more popular today!

Screen Shot 2022-08-06 at 6 06 49 PM

Screen Shot 2022-08-06 at 6 06 53 PM

Arrow key highlighting is hidden by "available" highlighting

If you search for something that's available, the available results get a green background. If you mouse over them, the green darkens. If, however, you use the arrow keys to move over them, the green does not darken (even though the arrow keys do darken non-available results).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.