jQuery的淘汰赛自动填充功能不允许选择自定义值
问题描述：
我已阅读this topic如何使用淘汰赛实现自动填充。jQuery的淘汰赛自动填充功能不允许选择自定义值
我已经开始工作了，但注意到我无法选择我自己的类型值。
更多描述：我将任何字符串输入到自动完成源中不存在的输入中。因此，该字符串不会被设置为该输入的值。
ko.bindingHandlers.autoComplete = {
// Only using init event because the Jquery.UI.AutoComplete widget will take care of the update callbacks
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// { selected: mySelectedOptionObservable, options: myArrayOfLabelValuePairs }
var settings = valueAccessor();
var selectedOption = settings.selected;
var options = settings.options;
var elVal = $(element).val();
var updateElementValueWithLabel = function (event, ui) {
// Stop the default behavior
event.preventDefault();
// Update the value of the html element with the label
// of the activated option in the list (ui.item)
$(element).val(ui.item !== null ? ui.item.label : elVal);
// Update our SelectedOption observable
if(typeof ui.item !== "undefined") {
// ui.item - label|value|...
selectedOption(ui.item);
}
};
$(element).autocomplete({
source: options,
select: function (event, ui) {
updateElementValueWithLabel(event, ui);
},
focus: function (event, ui) {
updateElementValueWithLabel(event, ui);
},
change: function (event, ui) {
updateElementValueWithLabel(event, ui);
}
});
}
};
// Array with original data
var remoteData = [{
name: 'Ernie',
id: 1
}, {
name: 'Bert',
id: 2
}, {
name: 'Germaine',
id: 3
}, {
name: 'Sally',
id: 4
}, {
name: 'Daisy',
id: 5
}, {
name: 'Peaches',
id: 6
}];
function ViewModel() {
var self = this;
self.users = remoteData;
self.selectedOption = ko.observable('');
self.options = self.users.map(function (element) {
// JQuery.UI.AutoComplete expects label & value properties, but we can add our own
return {
label: element.name,
value: element.id,
// This way we still have acess to the original object
object: element
};
});
}
$(function() {
ko.applyBindings(new ViewModel());
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>
<input type="text" data-bind="autoComplete: { selected: selectedOption, options: options }" />
<!-- Debugging -->
<p data-bind="text: ko.toJSON(selectedOption())"></p>
答
如果要修改绑定接受不在选项列表中，你需要调整updateElementValueWithLabel不重置元素值值，当一个项目未选中。
ko.bindingHandlers.autoComplete = {
// Only using init event because the Jquery.UI.AutoComplete widget will take care of the update callbacks
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// { selected: mySelectedOptionObservable, options: myArrayOfLabelValuePairs }
var settings = valueAccessor();
var selectedOption = settings.selected;
var options = settings.options;
var elVal = $(element).val();
var updateElementValueWithLabel = function (event, ui) {
// Stop the default behavior
event.preventDefault();
// Update our SelectedOption observable
if(ui.item) {
// Update the value of the html element with the label
// of the activated option in the list (ui.item)
// ui.item - label|value|...
$(element).val(ui.item.label);
selectedOption(ui.item.label);
}else{
\t \t selectedOption($(element).val());
}
};
$(element).autocomplete({
source: options,
select: function (event, ui) {
updateElementValueWithLabel(event, ui);
},
change: function (event, ui) {
updateElementValueWithLabel(event, ui);
}
});
}
};
// Array with original data
var remoteData = [{
name: 'Ernie',
id: 1
}, {
name: 'Bert',
id: 2
}, {
name: 'Germaine',
id: 3
}, {
name: 'Sally',
id: 4
}, {
name: 'Daisy',
id: 5
}, {
name: 'Peaches',
id: 6
}];
function ViewModel() {
var self = this;
self.users = remoteData;
self.selectedOption = ko.observable('');
self.options = self.users.map(function (element) {
// JQuery.UI.AutoComplete expects label & value properties, but we can add our own
return {
label: element.name,
value: element.id,
// This way we still have acess to the original object
object: element
};
});
}
$(function() {
ko.applyBindings(new ViewModel());
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>
<input type="text" data-bind="autoComplete: { selected: selectedOption, options: options }" />
<!-- Debugging -->
<p data-bind="text: ko.toJSON(selectedOption())"></p>
非常感谢！这是我想要做的 – demo