{"_id":"576c4a4fce35490e00fd8267","category":{"_id":"5734b41b9c2cf82900b243ee","__v":0,"project":"5730eb946b55e93400b32aae","version":"5730eb946b55e93400b32ab1","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-12T16:49:31.689Z","from_sync":false,"order":9999,"slug":"components","title":"Components"},"project":"5730eb946b55e93400b32aae","version":{"_id":"5730eb946b55e93400b32ab1","project":"5730eb946b55e93400b32aae","__v":4,"createdAt":"2016-05-09T19:57:08.646Z","releaseDate":"2016-05-09T19:57:08.646Z","categories":["5730eb946b55e93400b32ab2","5734b41b9c2cf82900b243ee","5734c6986d9a38200073dd32","5734cea86d9a38200073dd5a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.3.25","version":"0.3.25"},"user":"5730eaf719c1e00e006d215f","__v":2,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-06-23T20:45:03.757Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"LocationTypeahead extends Typeahead and uses a LocationInput to provide a \"use my current location\" option in the typeahead and an icon to use the user's current location\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example Usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class='location-search'></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Pull in the library\\nconst db = [\\n  {\\n    displayName: 'Boston, MA',\\n    lng: 74.134134,\\n    lat: 45.432433\\n  },\\n  {\\n    displayName: 'New York, NY',\\n    lng: 13.131442,\\n    lat: -45.854975\\n  },\\n  {\\n    displayName: 'Paris, TX',\\n    lng: 14.5264,\\n    lat: 1.425255\\n  }\\n];\\n\\nconst fetch = function (term, cb) {\\n  //We only want to fetch if it's not current location, so check for lat\\n  if (!term.lat) {\\n    var matches = db.filter(function (item) {\\n    return (item.displayName + '').toLowerCase().indexOf(term.toLowerCase()) !== -1;\\n    });\\n\\n    // mimic ajax\\n    setTimeout(function () {\\n      cb(matches);\\n    }, 50);\\n  }\\n};\\n\\n// Instantiate a component, pass the selector of the container to insert component into and the opts\\nconst locationSearch = new UI.LocationTypeahead('.location-search', fetch, {\\n  currentLocationText: 'Use my location',\\n  geolocationAPI: window.navigator.geolocation,\\n  textInputOpts: {\\n    placeholder: 'Try \\\"New York\\\"'\\n  }\\n});\\n\\n// Subscribe to when new choices are selected from the Typeahead\\nlocationSearch.subscribe((choice) => {\\n  if (choice.isLocation) {\\n    console.log('location chosen', choice);\\n  } else {\\n    console.log(choice); // misc message\\n  }\\n});\\n\\n// Render the DOM for the LocationTypeahead component\\nlocationSearch.render();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"params\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"0-0\": \"el\",\n    \"2-0\": \"opts\",\n    \"2-3\": \"A catch all for various options. See the opts table below for options specific to this component.\",\n    \"2-1\": \"object\",\n    \"2-2\": \"{}\",\n    \"0-1\": \"string\",\n    \"0-2\": \"undefined\",\n    \"0-3\": \"A string of the selector for the element to put the component in\",\n    \"1-0\": \"fetch\",\n    \"1-1\": \"function\",\n    \"1-3\": \"The function to call to fetch/refresh results\",\n    \"1-2\": \"undefined\"\n  },\n  \"cols\": 4,\n  \"rows\": 3\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"opts\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"h-4\": \"Description\",\n    \"0-0\": \"allowFreeForm\",\n    \"0-2\": \"false\",\n    \"0-1\": \"boolean\",\n    \"0-3\": \"A boolean indicating if free form input will be accepted\",\n    \"3-0\": \"fixedResults\",\n    \"3-1\": \"`*[]`\",\n    \"3-2\": \"`[]`\",\n    \"3-3\": \"An array of results to always display\",\n    \"2-0\": \"displayProperty\",\n    \"2-1\": \"string\",\n    \"2-3\": \"A string indicating the property name of the property to display\",\n    \"2-2\": \"`'displayName'`\",\n    \"1-0\": \"currentLocationText\",\n    \"1-3\": \"A string to display for \\\"use my location\\\"\",\n    \"1-1\": \"string\",\n    \"1-2\": \"'Use my current location'\",\n    \"4-0\": \"textInputOpts\",\n    \"4-1\": \"object\",\n    \"4-2\": \"{}\",\n    \"4-3\": \"An object to pass opts to the textInput component\"\n  },\n  \"cols\": 4,\n  \"rows\": 5\n}\n[/block]","excerpt":"","slug":"locationtypeahead","type":"basic","title":"LocationTypeahead"}
LocationTypeahead extends Typeahead and uses a LocationInput to provide a "use my current location" option in the typeahead and an icon to use the user's current location [block:api-header] { "type": "basic", "title": "Example Usage" } [/block] [block:code] { "codes": [ { "code": "<div class='location-search'></div>", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// Pull in the library\nconst db = [\n {\n displayName: 'Boston, MA',\n lng: 74.134134,\n lat: 45.432433\n },\n {\n displayName: 'New York, NY',\n lng: 13.131442,\n lat: -45.854975\n },\n {\n displayName: 'Paris, TX',\n lng: 14.5264,\n lat: 1.425255\n }\n];\n\nconst fetch = function (term, cb) {\n //We only want to fetch if it's not current location, so check for lat\n if (!term.lat) {\n var matches = db.filter(function (item) {\n return (item.displayName + '').toLowerCase().indexOf(term.toLowerCase()) !== -1;\n });\n\n // mimic ajax\n setTimeout(function () {\n cb(matches);\n }, 50);\n }\n};\n\n// Instantiate a component, pass the selector of the container to insert component into and the opts\nconst locationSearch = new UI.LocationTypeahead('.location-search', fetch, {\n currentLocationText: 'Use my location',\n geolocationAPI: window.navigator.geolocation,\n textInputOpts: {\n placeholder: 'Try \"New York\"'\n }\n});\n\n// Subscribe to when new choices are selected from the Typeahead\nlocationSearch.subscribe((choice) => {\n if (choice.isLocation) {\n console.log('location chosen', choice);\n } else {\n console.log(choice); // misc message\n }\n});\n\n// Render the DOM for the LocationTypeahead component\nlocationSearch.render();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "params" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "0-0": "el", "2-0": "opts", "2-3": "A catch all for various options. See the opts table below for options specific to this component.", "2-1": "object", "2-2": "{}", "0-1": "string", "0-2": "undefined", "0-3": "A string of the selector for the element to put the component in", "1-0": "fetch", "1-1": "function", "1-3": "The function to call to fetch/refresh results", "1-2": "undefined" }, "cols": 4, "rows": 3 } [/block] [block:api-header] { "type": "basic", "title": "opts" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "h-4": "Description", "0-0": "allowFreeForm", "0-2": "false", "0-1": "boolean", "0-3": "A boolean indicating if free form input will be accepted", "3-0": "fixedResults", "3-1": "`*[]`", "3-2": "`[]`", "3-3": "An array of results to always display", "2-0": "displayProperty", "2-1": "string", "2-3": "A string indicating the property name of the property to display", "2-2": "`'displayName'`", "1-0": "currentLocationText", "1-3": "A string to display for \"use my location\"", "1-1": "string", "1-2": "'Use my current location'", "4-0": "textInputOpts", "4-1": "object", "4-2": "{}", "4-3": "An object to pass opts to the textInput component" }, "cols": 4, "rows": 5 } [/block]