node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


Select To Autocomplete: Redesigned Country Selector

An improved way to select a country in web forms.

  • Design improves upon a standard country dropdown list.
  • Accepts keyboard typing input.
  • Autocomplete from a list of synonyms.
  • Handles typos.
  • Prioritizes autocomplete results.

The solution is a redesigned country selector that addresses the issues of drop-down country selectors. It handles typos, various spelling sequences, synonyms and prioritized options. The technically correct term for this would be something like an “auto-complete text field with loose partial matching, synonyms and weighted results.” That’s a bit long, so I’ve simply dubbed it the “Redesigned Country Selector”.


You can use this package on the client side, as a jQuery plugin, or on the server side, as a Node.js package.

On the client side it modifies the default select widget. On the server side it generates HTML for the complete exhaustive country list compatible with the requirements of the client, including specialized attributes.

In addition to this package you'll need jQuery, a jquery autocomplete plugin, and CSS to style the HTML for the country selector. See sample.html to get started. You might also find test.nodjs.countryList.js a helpful example.

To use on the server side do 'npm install nodejs.countrylist.js'. Then in your node module:

var lib = require("./nodejs.countryList.js");
var defaultCountry = 'Vanuatu';
var cl = lib.countryList(defaultCountry);
// insert the HTML you have generated into your template
res.render('template.html', { placeholderInHTML: cl } );