Creating a autocomplete field with Typeahead in the Durandal Framework

I'm trying to achieve a autocomplete input field with typeahead (Twitter Bootstrap). This autocomplete field should be in a modal but I can't seem to get it working! It also must be observable with Knockout because when you select a value other fields should be updated to.

So I'm looking to do this in a modal!

HTML

<div class="messageBox">
    <div class="modal-header">
        <h2>Adding a repairline</h2>
    </div>
    <div class="modal-body" style="width: 35em;">
        <form data-bind="submit: ok">
            <fieldset>
                <!--<legend></legend> Deze niet toevoegen uitlijning is dan niet goed!-->
                <div class="row-fluid">
                    <div class="span6">
                        <div>   
                            <label>
                                Description:
                                <input type="text" id="testen" data-provide="typeahead" />
                               
                                
                                
                            </label>
                        </div>
                        <div>
                            <label>
                                Code:
                                <input data-bind="value: Code" required />
                            </label>
                        </div>          
                <div>
                    <input class="btn btn-primary" type="submit" value="Add" />
                </div>
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-bind="click: closeModal">Cancel</button>    
    </div>
</div>

JS

define(function (require) {
    var dataservice = require('services/dataservice'),
        allCustomers = ko.observableArray([]),
        repairlines = ko.observableArray([]);
        

    function init() {
        dataservice = new dataservice('api/data');
        dataservice.getAllRows('AllCustomers').then(function (data) {
            data.results.forEach(function (item) {
                allCustomers.push(item);
            });
        }).fail(function () {   
        });
        
        dataservice.getAllRows('EntireRepairLineLib').then(function (data) {
            data.results.forEach(function (item) {
                repairlines.push(item);
            });
        }).fail(function () {
        });
        
        $('.testen .typeahead').typeahead({
            name: 'countries',
            prefetch: 'http://twitter.github.io/typeahead.js/data/countries.json',
            limit: 10
        });
    }

    init();

    AddRepairOrderLineModal = function (loggedInEmployee) {
        //later ook customer en repairorder meegeven!
        this.allCustomers = allCustomers;
        this.choosenCustomerId = ko.observable(); //holds the Id of the chosen customer
        this.Description = ko.observable();
        this.Code = ko.observable();
        this.Mat = ko.observable();
        this.Location = ko.observable();
        this.Rep = ko.observable();
        this.Dum = ko.observable();
        this.Dam = ko.observable();
        this.Qty = ko.observable();
        this.Hours = ko.observable();
        this.Tariff = ko.observable();
        this.Costs = ko.observable();
        this.CreationDate = (new Date().getMonth() + 1) + "-" + new Date().getDate() + "-" + new Date().getFullYear();

        this.IsAgreement = ko.observable(true);
        this.IsAuthorized = ko.observable(true);
        this.DoRepair = ko.observable(true);
        this.selectedEmployee = loggedInEmployee;

       /* $(".repairlinename").autocomplete({
           source: repairlines 
        });*/
        

        $(document).ready(function() {
            alert('done');
            $('#testen').append(' Leroy');
        }); 
    };
    AddRepairOrderLineModal.prototype.ok = function () {
        var jsonObj = [];
        jsonObj.push({
            Description: this.Description(), Code: this.Code(),
            Mat: this.Mat(), Location: this.Location(),
            Rep: this.Rep(), Dum: this.Dum(), Dam: this.Dam(),
            CustomerId: this.choosenCustomerId(), Qty: this.Qty(), Hours: this.Hours(),
            Tariff: this.Tariff(), Costs: this.Costs(), CreationDate: this.CreationDate,
            IsAgreement: this.IsAgreement(), IsAuthorized: this.IsAuthorized(), DoRepair: this.DoRepair(),
        });
        this.modal.close(jsonObj);
    };

    AddRepairOrderLineModal.prototype.closeModal = function () {
        return this.modal.close();
    };
    return AddRepairOrderLineModal;
});



    /*define(['durandal/app','services/dataservice'], function(app,dataservice) {
        AddRepairOrderLineModal = function (loggedInEmployee) {
            //later ook customer en repairorder meegeven!
            
    
    
    
            this.Description = ko.observable();
            this.Code = ko.observable();
            this.Mat = ko.observable();
            this.Location = ko.observable();
            this.Rep = ko.observable();
            this.Dum = ko.observable();
            this.Dam = ko.observable();
            this.Customer = ko.observable();
            this.Qty = ko.observable();
            this.Hours = ko.observable();
            this.Tariff = ko.observable();
            this.Costs = ko.observable();
            this.CreationDate = (new Date().getMonth() + 1) + "-" + new Date().getDate() + "-" + new Date().getFullYear();
    
            this.IsAgreement = ko.observable(true);
            this.IsAuthorized = ko.observable(true);
            this.DoRepair = ko.observable(true);
            this.selectedEmployee = loggedInEmployee;
        };
        
        AddRepairOrderLineModal.prototype.ok = function () {
            var jsonObj = [];
            jsonObj.push({
                Description: this.Description(), Code: this.Code(),
                Mat: this.Mat(), Location: this.Location(),
                Rep: this.Rep(), Dum: this.Dum(), Dam: this.Dam(),
                Customer: this.Customer(), Qty: this.Qty(), Hours: this.Hours(),
                Tariff: this.Tariff(), Costs: this.Costs(), CreationDate: this.CreationDate,
                IsAgreement: this.IsAgreement(), IsAuthorized: this.IsAuthorized(), DoRepair: this.DoRepair()
            });
            this.modal.close(jsonObj);
        };
    
        AddRepairOrderLineModal.prototype.closeModal = function() {
            return this.modal.close();
        };
        return AddRepairOrderLineModal;
        /*
        http://stackoverflow.com/questions/7537002/autocomplete-combobox-with-knockout-js-template-jquery
        http://jsfiddle.net/rniemeyer/PPsRC/
        *//*
    });
    
    */

The source is repairlines, these are all filled in correctly.

You would need to bind the typeahead input to an array exposed on your view model. I don't think you are doing either at the moment.

To do the bindings you should use knockout-bootstrap bindings found here: http://billpull.github.io/knockout-bootstrap/

Once you have included the above knockout-bootstrap bindings you can do this in your view:

<input type="text" data-bind="typeahead: repairlines" />

Then make sure you are adding repairlines to your VM instance. Adding it to your this reference should do the trick.

// this will add the repairlines observable array to your VM instance
this.repairlines = repairlines;