Giter Club home page Giter Club 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 Mashape with your Mashape API key, or contact us regarding high-volume usage.

Plain JavaScript

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

jQuery

$('input#search')
  .domainrSearchBox({
    mashapeKey: yourMashapeKey, // your Mashape API key
    clientId: yourClientId, // or alternatively your Client ID; not needed if using Mashape
    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 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

case avatar iangilman avatar ydnar avatar dependabot-support avatar connyay avatar 1gb avatar dubcanada avatar cee-dub avatar

Watchers

K. N. avatar James Cloos avatar  avatar

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.