knockout js and autocomplete

by Randy Crews

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<label for="name-search" >Search language: </label>
<input type="text" id="name-search" data-bind="value: langName, 
ko_autocomplete: { source: getLangs(), select: addLang }"/>
<div style="margin-top:1em">
    The observable array contains the following elements:
    <ul data-bind="foreach: selectedLangs">
        <li data-bind="text: $data" />
    </ul>        
</div>

JavaScript

ko.bindingHandlers.ko_autocomplete = {
    init: function (element, params) {
        $(element).autocomplete(params());
    },
    update: function (element, params) {
        $(element).autocomplete("option", "source", params().source);
    }
};

$(function() {
    
    var availableTags = [
            {label:"ActionScript",value:1},
            {label:"AppleScript",value:2},
            {label:"Asp",value:3},
            {label:"BASIC",value:4},
            {label:"C",value:5},
            {label:"C++",value:6},
            {label:"Clojure",value:7},
            {label:"COBOL",value:8},
            {label:"ColdFusion",value:9},
            {label:"Erlang",value:10},
            {label:"Fortran",value:11},
            {label:"Groovy",value:12},
            {label:"Haskell",value:13},
            {label:"Java",value:14},
            {label:"JavaScript",value:15},
            {label:"Lisp",value:16},
            {label:"Perl",value:17},
            {label:"PHP",value:18},
            {label:"Python",value:19},
            {label:"Ruby",value:20},
            {label:"Scala",value:21},
            {label:"Scheme",value:22}
        ];
            
        // knockout view model                    
        var ViewModel = function(){
        
            var self = this;
            
            self.langName = ko.observable();
            self.selectedLangs = ko.observableArray();
            
            // return some programming languages
            self.getLangs = function(){
                return availableTags;
            }
            
            // user clicked on a auto complete item
            self.addLang = function(event, ui){
                    
                $(event.target).val("");
                
                var lang = ui.item.label;
                var id = ui.item.value;
            
                self.selectedLangs.push("id: " + id + ", Language: " + lang);
                
                return false;
            }
               ...