我有一个我用knockout创建的ViewModel,其中包含我产品的所有信息。 它看起来像这样:
var ProductViewModelDS = function (data) {
var self = this;
self.ProductSKUID = ko.observable(data.ProductSKUID);
self.ProductID = ko.observable(data.ProductID);
self.ProductSKUStockCode = ko.observable(data.ProductSKUStockCode);
self.ProductSKUManufacturePartNumber = ko.observable(data.ProductSKUManufacturePartNumber);
self.ProductSKUName = ko.observable(data.ProductSKUName);
self.ProductSKUPrice = ko.observable(data.ProductSKUPrice);
self.ProductSKUSpecialPrice = ko.observable(data.ProductSKUSpecialPrice);
self.ProductSKUIsOnSpecial = ko.observable(data.ProductSKUIsOnSpecial);
self.ProductSKUMinimumOrderQty = ko.observable(data.ProductSKUMinimumOrderQty);
self.ProductSKUMaximumOrderQty = ko.observable(data.ProductSKUMaximumOrderQty);
self.ProductSKUCurrentStock = ko.observable(data.ProductSKUCurrentStock);
}
我想提前使用bootstrap类型,以便我可以查看产品信息。 我发现了 Article ,它为我提供了事件处理程序。
但是一旦我开始输入,我就会在控制台中收到此错误:
未捕获的TypeError:对象[object Object]没有方法'toLowerCase'bootstrap.js:1831 未捕获的TypeError:无法使用'in'运算符在1中搜索'length'
这是我从AJAX电话中得到的JSON:
{
"d": [
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 15,
"ProductID": 1,
"ProductSKUStockCode": "BPUNIRM1131",
"ProductSKUManufacturePartNumber": "600284403 1213",
"ProductSKUName": "DSD 1131 Remote Control",
"ProductSKUPrice": 84,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 16,
"ProductID": 2,
"ProductSKUStockCode": "SDF213",
"ProductSKUManufacturePartNumber": "55511545121",
"ProductSKUName": "DSD 1132",
"ProductSKUPrice": 599,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 17,
"ProductID": 3,
"ProductSKUStockCode": "RPAIRDRHD",
"ProductSKUManufacturePartNumber": "600284400 1018",
"ProductSKUName": "HD PVR Remote Control",
"ProductSKUPrice": 250,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 18,
"ProductID": 4,
"ProductSKUStockCode": "1131",
"ProductSKUManufacturePartNumber": "DSD1131",
"ProductSKUName": "DSD1131 DVB-S",
"ProductSKUPrice": 499,
"ProductSKUSpecialPrice": 498,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 19,
"ProductID": 5,
"ProductSKUStockCode": "4660",
"ProductSKUManufacturePartNumber": "DSR4660",
"ProductSKUName": "DSR4660 HD DVB-S2",
"ProductSKUPrice": 1499,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 100,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 20,
"ProductID": 6,
"ProductSKUStockCode": "DVR3000",
"ProductSKUManufacturePartNumber": "MCSDPVR3000",
"ProductSKUName": "DVR3000",
"ProductSKUPrice": 1500,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 21,
"ProductID": 7,
"ProductSKUStockCode": "DE45",
"ProductSKUManufacturePartNumber": "N/A",
"ProductSKUName": "ELSAT 45CM MILD STEEL DISH",
"ProductSKUPrice": 560,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
},
{
"__type": "POS.Tracntrace.Member_Only.DAL.Models.CreateOrder.CreateOrderProductModel",
"ProductSKUID": 22,
"ProductID": 8,
"ProductSKUStockCode": "DE60",
"ProductSKUManufacturePartNumber": "N/A",
"ProductSKUName": "ELSAT 60CM MILD STEEL DISH",
"ProductSKUPrice": 900,
"ProductSKUSpecialPrice": null,
"ProductSKUIsOnSpecial": "false",
"ProductSKUMinimumOrderQty": 1,
"ProductSKUMaximumOrderQty": 10000,
"ProductSKUCurrentStock": 100
}
]
}
我只想搜索ProductSKUName,ProductSKUStockCode或ProductSKUManufactureStockCode。
任何建议都将不胜感激。
HTML:
<div class="well">
<input type="text" data-bind="typeahead: { target: ProductViewModel, source: Products }" />
</div>
修改
我的Javascript:
ko.bindingHandlers.typeahead = {
init: function (element, valueAccessor) {
var binding = this;
var elem = $(element);
var value = valueAccessor();
elem.typeahead(
{
source: function () { return ko.utils.unwrapObservable(value.source); },
onselect: function (val) { value.target(val); }
});
elem.blur(function () { value.target(elem.val()); });
},
update: function (element, valueAccessor) {
var elem = $(element);
var value = valueAccessor();
elem.val(value.target());
}
};
var ProductViewModelDS = function (data) {
var self = this;
self.ProductSKUID = ko.observable(data.ProductSKUID);
self.ProductID = ko.observable(data.ProductID);
self.ProductSKUStockCode = ko.observable(data.ProductSKUStockCode);
self.ProductSKUManufacturePartNumber = ko.observable(data.ProductSKUManufacturePartNumber);
self.ProductSKUName = ko.observable(data.ProductSKUName);
self.ProductSKUPrice = ko.observable(data.ProductSKUPrice);
self.ProductSKUSpecialPrice = ko.observable(data.ProductSKUSpecialPrice);
self.ProductSKUIsOnSpecial = ko.observable(data.ProductSKUIsOnSpecial);
self.ProductSKUMinimumOrderQty = ko.observable(data.ProductSKUMinimumOrderQty);
self.ProductSKUMaximumOrderQty = ko.observable(data.ProductSKUMaximumOrderQty);
self.ProductSKUCurrentStock = ko.observable(data.ProductSKUCurrentStock);
self.SearchText = ko.computed(function () {
return self.ProductSKUName() + ' ' + self.ProductSKUStockCode() + ' ' + self.ProductSKUManufacturePartNumber();
});
}
var ProductViewModel = function (Products) {
var self = this;
self.Products = ko.observableArray(Products);
$.ajax({
url: "CreateOrder.aspx/GetAvailibleProducts",
data: '{}',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
var MappedProducts =
$.map(Result.d,
function (item) {
return new ProductViewModelDS(item);
}
);
self.Products(MappedProducts);
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
self.Save = function () {
alert('Could Now Save: ' + ko.mapping.toJSON(self.Products));
}
};
$(document).ready(function () {
var VM = new ProductViewModel();
ko.applyBindings(VM);
})
答案 0 :(得分:2)
看看你提供的链接,你有没有得到你的目标并且采取错误的方式来源?
基本上,类型提前插件似乎需要一个字符串值数组,它可以用于自动完成建议。将SearchText属性添加到ProductViewModel,它循环遍历所有产品,并将您想要的三个字段放入searchterm数组中。
var ProductViewModel = function () {
self.SearchText = ko.computed(function()
{
var searchableTerms = [];
ko.utils.arrayForEach(self.Products(), function (item)
{
searchableTerms.push(item.ProductSKUName());
searchableTerms.push(item.ProductSKUStockCode());
searchableTerms.push(item.ProductSKUManufacturePartNumber());
});
return searchableTerms;
});
};
然后将html更新为:
<div class="well">
<input type="text" data-bind="typeahead: { target: Products, source: SearchText }" />
</div>