Skip to content

Commit

Permalink
Cleaning up code branches now that docjs lives in gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Curtis Cummings committed Mar 27, 2015
1 parent 767a4a9 commit 81f2ec2
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 25 deletions.
1 change: 0 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
node_modules/
test/
Gruntfile.js
can-autocomplete.html
5 changes: 0 additions & 5 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
var path = require('path');
var docConfig = require('./documentjs.json');
var isCI = process.env.CI === 'true';

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'
Expand Down Expand Up @@ -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']);
};
153 changes: 135 additions & 18 deletions README.md
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>
```
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 81f2ec2

Please sign in to comment.