https://github.com/one-com/knockout.autocomplete
Auto completion binding for knockout
https://github.com/one-com/knockout.autocomplete
Last synced: about 1 month ago
JSON representation
Auto completion binding for knockout
- Host: GitHub
- URL: https://github.com/one-com/knockout.autocomplete
- Owner: One-com
- Created: 2012-11-06T09:44:32.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2020-09-01T19:42:27.000Z (over 4 years ago)
- Last Synced: 2025-04-12T06:38:10.044Z (about 1 month ago)
- Language: JavaScript
- Size: 266 KB
- Stars: 20
- Watchers: 14
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## knockout.autocompletion
An auto completion binding for Knockout.
[](https://travis-ci.org/One-com/knockout.autocomplete)
### Usage
```js
var viewModel = {
keywords: ko.observableArray([
'abstract', 'add', 'alias', 'as', 'ascending',
'async', 'await', 'base', 'bool', 'break'
])
};
ko.applyBindings(viewModel);
```
```html
```
### API
You can use the following options to configure the behavior of the auto
completion.
#### data (required)
An array or an observable array of completion candidates.
#### maxItems (default 8)
The number of items that the auto completion binding should maximally show.
#### minLength (default 1)
The min lenght of the query before showing the completion suggestions.
#### format (default toString)
A function that will format the items for displaying as suggestions to the user.
The function should return a string.
#### onSelect (default toString)
The function that will be called when a completion suggestion has been chosen by
the user. You can return a string from the function to update the value of the
input field.
#### query (default ko.observable(''))
An observable the contain the text query the items should be filtered by.
#### className
A css class that will be applied to the menu element.
#### visible
An observable that decides whether the completion menu is shown.
#### noFilter (default false)
Use this flag to disable automatically filtering of the data items.
#### separators (default null)
A string of characters that will trigger a completion. See the examples for how
to complete on comma or semicolon.
#### renderSuggestion (default function that highlights the match)
Here is a rendering function the item without highlighting the match:
```js
function (completionItem) {
return '
};
```
#### after (default false)
Appends the autocomplete element, after the target element (input). In this way,
the autocomplete can be positioned absolute, but within a container surrounding
both input and autocomplete. See the example on how to use it.
### Examples
[Click here to see an example](https://cdn.rawgit.com/One-com/knockout.autocomplete/master/examples/index.html)
# Licence
```
Copyright 2012 Sune Simonsen
https://github.com/One-com/knockout.autocomplete
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```