【发布时间】：2013-04-18 04:38:48
【问题描述】：
我正在尝试使用预先输入（twitter 引导程序）实现自动完成输入字段。这个自动完成字段应该是模态的，但我似乎无法让它工作！它还必须是可通过剔除观察到的，因为当您选择一个值时，其他字段应更新为。
所以我有点想在模态中做到这一点！
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/
*//*
});
*/
我希望有人可以帮助我如何做到这一点！来源是repairlines，这些都填对了
【问题讨论】：
标签： javascript twitter-bootstrap knockout.js durandal