-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cleaning up code branches now that docjs lives in gh-pages
- Loading branch information
Curtis Cummings
committed
Mar 27, 2015
1 parent
767a4a9
commit 81f2ec2
Showing
4 changed files
with
135 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
node_modules/ | ||
test/ | ||
Gruntfile.js | ||
can-autocomplete.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,149 @@ | ||
<!-- | ||
@page autocomplete Autocomplete | ||
# bit-autocomplete | ||
|
||
--> | ||
# 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 `<bit-autocomplete></bit-autocomplete>` 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 | ||
<script type="text/stache" id="demo" can-autorender> | ||
<can-import from="bit-autocomplete"/> | ||
<bit-autocomplete model="{model}"></bit-autocomplete> | ||
</script> | ||
|
||
<script src="./node_modules/steal/steal.js" | ||
main="can/view/autorender/"> | ||
import can from "can"; | ||
import MyModel from "models/myModel/"; | ||
can.$("#demo").viewModel().attr({ | ||
model: MyModel | ||
}); | ||
</script> | ||
``` | ||
|
||
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('<bit-autocomplete model="{model}"></bit-autocomplete>'); | ||
|
||
$("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('<bit-autocomplete model="{model}"></bit-autocomplete>'); | ||
|
||
$("body").append(template({ | ||
model: MyModel | ||
})); | ||
|
||
``` | ||
|
||
## AMD use | ||
|
||
Configure the `can` and `jquery` paths and the `bit-autocomplete` package: | ||
|
||
```html | ||
<script src="require.js"></script> | ||
<script> | ||
require.config({ | ||
paths: { | ||
"jquery": "node_modules/jquery/dist/jquery", | ||
"can": "node_modules/canjs/dist/amd/can" | ||
}, | ||
packages: [{ | ||
name: 'bit-autocomplete', | ||
location: 'node_modules/bit-autocomplete/dist/amd', | ||
main: 'autocomplete' | ||
}] | ||
}); | ||
require(["main-amd"], function(){}); | ||
</script> | ||
``` | ||
|
||
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('<bit-autocomplete model="{model}"></bit-autocomplete>'); | ||
|
||
## 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 | ||
<link rel="stylesheet" type="text/css" | ||
href="./node_modules/bit-autocomplete/dist/global/bit-autocomplete.css"> | ||
|
||
- 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. | ||
<script src='./node_modules/jquery/dist/jquery.js'></script> | ||
<script src='./node_modules/canjs/dist/can.jquery.js'></script> | ||
<script src='./node_modules/canjs/dist/can.stache.js'></script> | ||
<script src='./node_modules/bit-autocomplete/dist/global/bit-autocomplete.js'></script> | ||
<script src='./models/myModel.js'></script> | ||
<script id='main-stache' text='text/stache'> | ||
<bit-autocomplete model="{model}"></bit-autocomplete> | ||
</script> | ||
<script> | ||
$("body").append( can.view("main-stache",{ | ||
model: app.MyModel | ||
}) ); | ||
</script> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters