An auto completion binding for Knockout.

An auto completion binding for Knockout.

var viewModel = {
    keywords: ko.observableArray([
        'abstract', 'add', 'alias', 'as', 'ascending',
        'async', 'await', 'base', 'bool', 'break'
<input data-bind="autocomplete: { data: keywords, maxItems: 6 }" value=""/>

You can use the following options to configure the behavior of the auto completion.

An array or an observable array of completion candidates.

The number of items that the auto completion binding should maximally show.

The min lenght of the query before showing the completion suggestions.

A function that will format the items for displaying as suggestions to the user. The function should return a string.

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.

An observable the contain the text query the items should be filtered by.

A css class that will be applied to the menu element.

An observable that decides whether the completion menu is shown.

Use this flag to disable automatically filtering of the data items.

A string of characters that will trigger a completion. See the examples for how to complete on comma or semicolon.

Here is a rendering function the item without highlighting the match:

function (completionItem) {
    return  '<li>' + completionItem.label + '</li>';

Click here to see an example


Copyright 2012 Sune Simonsen
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
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and
limitations under the License.