diff --git a/.npmignore b/.npmignore index eeb3b61..5ceea91 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,3 @@ node_modules/ test/ Gruntfile.js -can-autocomplete.html diff --git a/Gruntfile.js b/Gruntfile.js index 0f98840..926d688 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,4 @@ var path = require('path'); -var docConfig = require('./documentjs.json'); var isCI = process.env.CI === 'true'; module.exports = function (grunt) { @@ -7,10 +6,8 @@ module.exports = function (grunt) { grunt.loadNpmTasks('steal-tools'); grunt.loadNpmTasks('testee'); grunt.loadNpmTasks('grunt-serve'); - grunt.loadNpmTasks('documentjs'); var config = { - docConfig: docConfig, testee: { options: { reporter: 'Spec' @@ -46,10 +43,8 @@ module.exports = function (grunt) { } }; - config.documentjs = docConfig; grunt.initConfig(config); grunt.registerTask('server',['serve']); grunt.registerTask('build',['steal-export']); grunt.registerTask('test', [ isCI ? 'testee:ci' : 'testee:local' ]); - grunt.registerTask('docs', ['documentjs']); }; diff --git a/README.md b/README.md index ca44a57..68e2dc5 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,149 @@ - -# Autocomplete +[![Build Status](https://travis-ci.org/bitovi-components/bit-autocomplete.svg?branch=master)](https://travis-ci.org/bitovi-components/bit-autocomplete) -`bit-autocomplete` is an auto-suggest/auto-complete/search control. It searches a model on a specified key and renders the results as a list below the search field. The search itself is debounced and delayed. By default, it will wait for 5 characters before doing a search and will then wait 400 milliseconds between keystrokes before doing another search. +An auto-suggest/auto-complete widget for CanJS that can be loaded by: -## Usage +- StealJS + ES6 +- npm / Browserify / CJS +- RequireJS / AMD +- Standalone + +It searches a model on a specified key and renders the results as a list below the search field. The search itself is debounced and delayed. By default, it will wait for 3 characters before doing a search and will then wait 250 milliseconds between keystrokes before doing another search. -There are three builds within the `dist` folder, "amd", "cjs", and "global". Use whichever is necessary using your method of choice. +## Install -Once the js file is loaded, adding `` to your template will add an autocomplete component with full functionality. +```bash +npm install bit-autocomplete --save +``` + +## Usage -`bit-autocomplete` only requires a search model object passed to it. It assumes that it will need to search the `label` property of objects, so it will pass something like `{ label: "apple"}` to the `findAll` method of the model. This can be changed during instantiation of the component. +`bit-autocomplete` only requires a search model object passed to it. It assumes that it will need to search the `label` property of objects, so it will pass something like `{ label: "apple"}` to the `findAll` method of the model. This can be changed during instantiation of the component by specifying the `search-key` attribute. If a selection needs to be monitored, live-bind to the `validated` property. -Once the user selects an item from the results list, the object is copied to the `selectedItem` property and the search field is updated with the actual selected item's value. +Once the user selects an item from the results list, it will be available as the `selectedItem` property of the viewModel and the search field is updated with the selected item's value. + +##Install + +### ES6 + +With StealJS, you can import this module directly in a template that is autorendered: + +```html + + + +``` + +Alternatively, you can import this module like: + +```js +import "bit-tabs"; +import MyModel from "models/myModel/"; +import can from "can"; +import $ from "jquery"; +import stache from "can/view/stache/stache"; + +var template = stache(''); + +$("body").append(template({ + model: MyModel +})); + +``` + +## CJS + +Use `require` to load `bit-autocomplete` and everything else +needed to create a template that uses `bit-autocomplete`: + +```js +var can = require("canjs"); +var $ = require("jquery"); +var MyModel = require("models/myModel"); + +// Add's bit-autocomplete tag +require("bit-autocomplete"); +// Use stache +require("canjs/view/stache/stache"); + +var template = stache(''); + +$("body").append(template({ + model: MyModel +})); + +``` + +## AMD use + +Configure the `can` and `jquery` paths and the `bit-autocomplete` package: + +```html + + +``` + +Make sure you have the `css` plugin configured also! + +Use bit-autocomplete like: + +```js +define(["can", "jquery", "models/myModel", "can/view/stache", "bit-tabs"], function(can, $, MyModel){ + var template = stache(''); -## Dependancies + $("body").append(template({ + model: MyModel + })); +}); +``` -The only dependancy in use, other than CanJS, is [Lo-Dash](https://lodash.com/). It is used for debouncing. +## Standalone use -## Grunt +Load the `global` css and js files: -There are three simple tasks in the Gruntfile, `server`, `build`, `docs` and `test`. +```html + -- Server: Runs a simple server. Can run the test file manually and review the component's demo file (index.html). -- Build: Builds the component distributions. -- Docs: Runs DocumentJS to build documentation. -- Test: Runs the QUnit tests for the component. + + + + + + + +``` diff --git a/documentjs.json b/documentjs.json deleted file mode 100644 index ad69baa..0000000 --- a/documentjs.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "sites": { - "docs": { - "glob" : { - "pattern": "./**/*.{js,md}", - "ignore": "./{bower_components,node_modules,docs}/**/*.*" - }, - "dest" : "./docs", - "parent" : "autocomplete", - "package":{ - "repository": { - "github": "https://github.com/bitovi-components/bit-autocomplete" - }, - "version":"0.0.1" - } - } - } -} diff --git a/package.json b/package.json index 6ac1e77..d8079da 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ }, "devDependencies": { "bower": "1.3.8", - "documentjs": "^0.3.0-pre.1", "grunt": "~0.4.1", "grunt-cli": "^0.1.13", "grunt-serve": "^0.1.6",