31:T21e3,style_selectize = html` selectize.css `32:[] 2f:{"title":"Selectize.js & Synchronized Views","cells":[{"id":0,"value":"md`# Selectize.js & Synchronized Views`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`A slightly more bare bones example of how to use Selectize.js, forking code from [Aaron Kyle Dennis](https://observablehq.com/@aaronkyle/selectize-js). Also, I've programmatically added the options so you can connect to any array, and added [views](https://observablehq.com/@mbostock/synchronized-views) so the submit plays well in Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"selectedNeighborhoods","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"dropdown = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`### Modules & Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$$(function() {\n $('#select-country').selectize({ plugins: ['remove_button'] });\n $('#contacts').submit(function(e){\n e.preventDefault();\n \n const results = $('#select-country').val();\n \n viewof selectedNeighborhoods.value = results\n \n });\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import {areas} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$$ = {\n const $ = await require('jquery@^1.7.0');\n await require('selectize.js@0.12');\n return $;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"require('bootstrap@4.1.3/dist/js/bootstrap').catch(() => window.bootstrap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof selectedNeighborhoods = new View([])","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"class View {\n constructor(value) {\n this._list = [];\n this._value = value;\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`### Stylesheets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"style_bootstrap = html`\nbootstrap.css\n\t\t\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}