what3words/example-requirejs-autosuggest-plugin

Name: example-requirejs-autosuggest-plugin

Owner: what3words

Description: null

Created: 2017-09-08 08:49:58.0

Updated: 2017-09-08 09:34:58.0

Pushed: 2017-09-08 09:34:57.0

Homepage: null

Size: 472

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

what3words jquery autosuggest plugin using requireJS

Using requireJS with our jquery-autosuggest-plugin can be tricky; indeed we use jquery-typeahead and, it needs a special configuration, not like classic AMD modules.

This example is based on requireJS example loading jquery from a CDN.

Get started

You will be prompt for your W3W_API_KEY to fully run the sample. You can sign up for an API key for free here.

Running this sample

Just serve up the www folder using any web server you'd like.

For example, with Python:

  1. $ cd www
  2. $ python -m SimpleHTTPServer
    ing HTTP on 0.0.0.0 port 8000 ...
    
  3. open your browser on the port above http://localhost:8000
Project structure
www
??? css
?   ??? flags.png
?   ??? jquery.w3w-autosuggest-plugin.bundle.min.css
??? index.html
??? js
    ??? app
    ?   ??? config.js
    ?   ??? main.js
    ??? config.js
    ??? lib
    ?   ??? jquery.w3w-autosuggest-plugin.js
    ?   ??? jquery.w3w-autosuggest-plugin.min.js
    ?   ??? require.js
    ??? vendor
        ??? jquery.typeahead.js
        ??? jquery.typeahead.min.js

For development/test purposes, the minified and non minified versions of the modules are provided

How it is working

The main file of this setup is www/js/config.js. It is loaded from index.html by this line:

ipt data-main="js/config" src="js/lib/require.js"></script>

config.js is mainly about path configuration. We point out the special paths to the application code, to the jquery-typeahead plugin and to the CDN for jQuery. Finally, the app main code is loaded at the bottom of the file:

irejs.config({
aseUrl': 'js/lib',
aths': {
'app': '../app',
'jquery': 'https://code.jquery.com/jquery-2.2.4.min',
'jquery-typeahead': '../vendor/jquery.typeahead.min'



oad the main app module to start the app
irejs(['app/main']);

app/main.js is where the app logic is:

ne(['jquery', 'jquery-typeahead', 'jquery.w3w-autosuggest-plugin.min'], function($) {
 the jquery-typeahead and jquery.w3w-autosuggest plugins have been loaded.
function() {
$('#w3w').w3wAddress({
  key: 'YOUR-API-KEY',
  validation: false
});
;

Resources
Licensing

The MIT License (MIT)

A copy of the license is available in the repository's license file.


This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.