无法选择自动完成的jQuery使用淘汰赛JS /绑定物品 [英] Not able to select / bind item from jquery autocomplete using Knockout JS
问题描述
在我终于能够从列表中添加和删除项目（看到小提琴） ，我提出实施jQuery的自动完成。
看着符文的例子并的Rene's例如，我能够触发自动完成。但是，当我选择一个项目，该值不会添加到我的隐藏输入，我的搜索框。
我目前的解决方案如下符文的例子，但我可能simplyfy它，并按照刘若英的例子，一旦我能够选择的项目进行绑定。
所以我的问题是：我怎样才能绑定所选项目吗？ 我创建了一个小提琴来测试。
的 PS。阵中时，把搜索数据（而不是从DB获得）我有在小提琴的问题。但是，这并不是我的主要问题。的
下面是关于自动完成的code部分：
我的HTML：
＆LT;输入类型=隐藏值=数据绑定=值：ITEM_ID/＆GT;
＆LT;输入类=表格控型=搜索数据绑定=值：ITEM_NAME，自动完成：项目/＆GT;
...
＆LT; UL类=列表组数据绑定=模板：{名称：'项目模板'，数据：$ root.items}＆GT;
...
＆LT; / UL＆GT;
我的JS;
//从数据库检索
VAR search_data = [
{ID：7186，名：百色}，
{ID：1069，名：BOSS黑}，
{ID：1070，名：BOSS绿}，
{ID：1071，名：BOSS Hugo Boss的}，
{ID：1072，名：BOSS橙}，
{ID：1074，名：波士顿兄弟}，
{ID：7678，名：Bosweel}
];ko.bindingHandlers.autoComplete = {
初始化：功能（元素，valueAccessor，allBindingsAccessor，视图模型，BindingContext中）{
变种selectedObservableArrayInViewModel = valueAccessor（）;
VAR自=的BindingContext;
self.item_id = ko.observable（）;
self.item_name = ko.observable（）; $（元素）.autocomplete（{
的minLength：2，
来源：函数（请求，响应）{
$阿贾克斯（{
来源：search_data，
数据：{期限：request.term}，
键入：POST，
数据类型：JSON
成功：功能（数据）{
响应（数据）;
}
}）;
}，
选择：功能（E，UI）{
VAR项目= ui.item;
self.item_name = ko.observable（item.name）;
self.item_id = ko.observable（item.id）;
}
}）。数据（uiAutocomplete）._ renderItem =功能（UL，项目）{
返回的jQuery（＆LT;立GT;＆LT; /李＆gt;中）
。数据（UI-自动完成项）
.append（＆所述a取代;+ item.name +＆下; / A＆gt;中）
.appendTo（微升）;
} }
};
我不知道我理解你的问题，所以我不知道这个答案吧。
首先，你需要替换此
VAR自=的BindingContext;
有了这个
VAR自=视图模型;
然后，在你选择的功能，不重新创建观测，更新它们，然后打电话给你的的addItem 功能：
选择：功能（E，UI）{
VAR项目= ui.item;
self.item_name（item.name）;
self.item_id（item.id）;
self.addItem（）;
}
编辑：
在previous小提琴，输入被一个项目的选择后清零。
添加返回false; 到选择函数的末尾，以避免
新建小提琴
After I finally was able to add and remove items from a list (see fiddle), I moved on to implement jQuery Autocomplete.
After looking at Rune's example and Rene's example, I am able to trigger Autocomplete. But when I select an item, the values are not added to my hidden input and my search box.
My current solution follows Rune's example, but I might simplyfy it and follow Rene's example once I'm able to bind the selected item.
So my question is: How can I bind the selected items? I've created a Fiddle to test.
PS. I'm having issues in the Fiddle when putting search data in array (instead of getting from DB). But that is not my main problem.
Here is the part of the code regarding Autocomplete:
My HTML:
<input type="hidden" value="" data-bind="value: item_id" />
<input class="form-control" type="search" data-bind="value: item_name, autoComplete: items" />
...
<ul class="list-group" data-bind="template: { name: 'item-template', data: $root.items}">
...
</ul>
My JS;
// Retrieved from DB
var search_data = [
{"id":"7186","name":"Bose"},
{"id":"1069","name":"BOSS Black"},
{"id":"1070","name":"BOSS Green"},
{"id":"1071","name":"BOSS Hugo Boss"},
{"id":"1072","name":"BOSS Orange"},
{"id":"1074","name":"Boston Brothers"},
{"id":"7678","name":"Bosweel"}
];
ko.bindingHandlers.autoComplete = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var selectedObservableArrayInViewModel = valueAccessor();
var self = bindingContext;
self.item_id = ko.observable();
self.item_name = ko.observable();
$(element).autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
source: search_data,
data: { term: request.term },
type: "POST",
dataType: "json",
success: function (data) {
response(data);
}
});
},
select: function(e, ui){
var item = ui.item;
self.item_name = ko.observable(item.name);
self.item_id = ko.observable(item.id);
}
}).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
return jQuery( "<li></li>" )
.data( "ui-autocomplete", item )
.append( "<a>"+ item.name + "</a>" )
.appendTo( ul );
}
}
};
I am not sure I understand your question, so I am not sure this answers it.
First, you need to replace this
var self = bindingContext;
With this
var self = viewModel;
Then, in your select function, don't re-create your observables, update them and then call your addItem function:
select: function(e, ui){
var item = ui.item;
self.item_name(item.name);
self.item_id(item.id);
self.addItem();
}
Updated fiddle (I removed your ajax call to show all items without filtering, just for the demo -- ajax call was failing)
EDIT:
In the previous fiddle, the input is cleared after the selection of an item.
Add return false; to the end of the select function to avoid that.
New fiddle
这篇关于无法选择自动完成的jQuery使用淘汰赛JS /绑定物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
