├── .gitignore ├── LICENSE ├── README.md ├── autoform-typeahead.html ├── autoform-typeahead.js └── package.js /.gitignore: -------------------------------------------------------------------------------- 1 | .meteor/local 2 | .meteor/meteorite 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 comerc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | comerc:autoform-typeahead 2 | ========================= 3 | 4 | An add-on Meteor package for [aldeed:autoform](https://github.com/aldeed/meteor-autoform). Provides a single custom input type, "typeahead", which renders an input using the [typeahead](https://twitter.github.io/typeahead.js/) plugin. 5 | 6 | ## Prerequisites 7 | 8 | The plugin library must be installed separately. 9 | 10 | In a Meteor app directory, enter: 11 | 12 | ```bash 13 | $ meteor add comerc:bs-typeahead 14 | $ meteor add aldeed:autoform 15 | ``` 16 | 17 | ## Installation 18 | 19 | In a Meteor app directory, enter: 20 | 21 | ```bash 22 | $ meteor add comerc:autoform-typeahead 23 | ``` 24 | 25 | ## Usage 26 | 27 | Specify "typeahead" for the `type` attribute of any input. This can be done in a number of ways: 28 | 29 | In the schema, which will then work with a `quickForm` or `afQuickFields`: 30 | 31 | ```js 32 | { 33 | tags: { 34 | type: String, 35 | autoform: { 36 | type: "typeahead", 37 | afFieldInput: { 38 | typeaheadOptions: {}, 39 | typeaheadDatasets: {} 40 | } 41 | } 42 | } 43 | } 44 | ``` 45 | 46 | Or on the `afFieldInput` component or any component that passes along attributes to `afFieldInput`: 47 | 48 | ```js 49 | {{> afQuickField name="tags" type="typeahead"}} 50 | 51 | {{> afFormGroup name="tags" type="typeahead"}} 52 | 53 | {{> afFieldInput name="tags" type="typeahead"}} 54 | ``` 55 | 56 | To provide typeahead options, set a `typeaheadOptions` attribute equal to a helper that returns the options object. Most of the `data-` attributes that the plugin recognizes should also work. 57 | 58 | ## Basic Usage 59 | 60 | You may use `autoform.options` (instead of `typeaheadDatasets`) like this example: 61 | 62 | ```js 63 | { 64 | tags: { 65 | type: String, 66 | autoform: { 67 | type: "typeahead", 68 | options: { 69 | 'value1': 'label1', 70 | 'value2': 'label2' 71 | } 72 | } 73 | } 74 | } 75 | ``` 76 | 77 | ## Demo 78 | 79 | [Live](http://autoform.meteor.com/types) 80 | 81 | ## Contributing 82 | 83 | Anyone is welcome to contribute. Fork, make your changes, and then submit a pull request. 84 | -------------------------------------------------------------------------------- /autoform-typeahead.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /autoform-typeahead.js: -------------------------------------------------------------------------------- 1 | AutoForm.addInputType("typeahead", { 2 | template: "afTypeahead", 3 | valueOut: function () { 4 | return this.typeahead('val'); 5 | }, 6 | valueConverters: { 7 | "number": AutoForm.Utility.stringToNumber, 8 | "numberArray": function (val) { 9 | if (_.isArray(val)) { 10 | return _.map(val, function (item) { 11 | item = $.trim(item); 12 | return AutoForm.Utility.stringToNumber(item); 13 | }); 14 | } 15 | return val; 16 | }, 17 | "boolean": AutoForm.Utility.stringToBool, 18 | "booleanArray": function (val) { 19 | if (_.isArray(val)) { 20 | return _.map(val, function (item) { 21 | item = $.trim(item); 22 | return AutoForm.Utility.stringToBool(item); 23 | }); 24 | } 25 | return val; 26 | }, 27 | "date": AutoForm.Utility.stringToDate, 28 | "dateArray": function (val) { 29 | if (_.isArray(val)) { 30 | return _.map(val, function (item) { 31 | item = $.trim(item); 32 | return AutoForm.Utility.stringToDate(item); 33 | }); 34 | } 35 | return val; 36 | } 37 | } 38 | }); 39 | 40 | Template.afTypeahead.helpers({ 41 | atts: function () { 42 | var atts = _.clone(this.atts); 43 | atts = AutoForm.Utility.addClass(atts, "twitter-typeahead form-control"); 44 | delete atts.typeaheadOptions; 45 | delete atts.typeaheadDatasets; 46 | return atts; 47 | } 48 | }); 49 | 50 | Template.afTypeahead.rendered = function () { 51 | // instanciate typeahead 52 | var substringMatcher = function(strs) { 53 | return function findMatches(q, cb) { 54 | var matches, substrRegex; 55 | // an array that will be populated with substring matches 56 | matches = []; 57 | // regex used to determine if a string contains the substring `q` 58 | substrRegex = new RegExp(q, 'i'); 59 | // iterate through the pool of strings and for any string that 60 | // contains the substring `q`, add it to the `matches` array 61 | $.each(strs, function(i, str) { 62 | if (substrRegex.test(str.label)) { 63 | // the typeahead jQuery plugin expects suggestions to a 64 | // JavaScript object, refer to typeahead docs for more info 65 | matches.push({ value: str.label }); 66 | } 67 | }); 68 | cb(matches); 69 | }; 70 | }; 71 | var options = { 72 | highlight: true 73 | }; 74 | if (this.data.atts.typeaheadOptions) { 75 | _.extend(options, this.data.atts.typeaheadOptions); 76 | } 77 | var datasets = { 78 | source: substringMatcher(this.data.selectOptions) 79 | }; 80 | if (this.data.atts.typeaheadDatasets) { 81 | _.extend(datasets, this.data.atts.typeaheadDatasets); 82 | } 83 | this.$('.twitter-typeahead').typeahead(options, datasets); 84 | }; 85 | 86 | Template.afTypeahead.destroyed = function () { 87 | this.$('.twitter-typeahead').typeahead('destroy'); 88 | }; 89 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'comerc:autoform-typeahead', 3 | summary: 'Custom "typeahead" input type for AutoForm', 4 | version: '1.0.6', 5 | git: 'https://github.com/comerc/meteor-autoform-typeahead.git' 6 | }); 7 | 8 | Package.onUse(function(api) { 9 | api.versionsFrom('1.0'); 10 | api.use('templating@1.0.0'); 11 | api.use('blaze@2.0.0'); 12 | api.use('aldeed:autoform@5.0.0'); 13 | api.addFiles([ 14 | 'autoform-typeahead.html', 15 | 'autoform-typeahead.js' 16 | ], 'client'); 17 | }); 18 | --------------------------------------------------------------------------------