仅在 Firefox 中,当我单击任何地方时,我的 Twitter 提前输入搜索输入会清除

In Firefox only, my twitter typeahead search input is clearing out when I click anywhere

本文关键字:输入 Twitter 搜索 清除 我的 方时 Firefox 任何地 单击 仅在      更新时间:2023-09-26

问题: 仅在 Firefox 中,在我预先输入输入值后,该值设置正确。 当我单击屏幕上的任何其他位置(包括 Firefox 窗口之外(时,该值将清除。 即使我按住 alt-tab 离开窗口,该值也会重置。

应该注意的是,我也在使用淘汰赛。

这是我的网页:

<input placeholder="Search for a lodge..." data-bind="typeahead: selectedLodgeID, value: selectedLodgeText, suggestions: lodgeList, suggestionsText: 'Name', suggestionsValue: 'ID'" />

这是我的预选型js:

ko.bindingHandlers['typeahead'] = {
'after': ['options', 'foreach'],
'init': function (element, valueAccessor, allBindings) {
    var value = valueAccessor();
    var valueUnwrapped = ko.unwrap(value);
    var textBinding = allBindings.get('value') || false;
    if (!textBinding)
        throw new Error("typeahead binding must include a value binding.");
    var suggestions = allBindings.get('suggestions') || false;
    if (!suggestions)
        throw new Error("typeahead binding must include a suggestions observableArray.");
    var suggestionsText = ko.unwrap(allBindings.get('suggestionsText')) || false;
    if (!suggestionsText)
        throw new Error("typeahead binding must include a suggestionsText string.");
    var suggestionsValue = ko.unwrap(allBindings.get('suggestionsValue')) || false;
    if (!suggestionsValue)
        throw new Error("typeahead binding must include a suggestionsValue string.");
    var valueAllowUnset = ko.unwrap(allBindings.get('valueAllowUnset')) || false;
    var substringMatcher = function () {
        return function findMatches(query, callback) {
            var matches = [];
            var filter = new RegExp(query, 'i');
            ko.utils.arrayForEach(suggestions(), function (item) {
                var text = item[suggestionsText];
                var id = item[suggestionsValue];
                if (filter.test(text)) {
                    matches.push({ value: text.trim(), id: id });
                }
            });
            callback(matches);
        };
    };
    $(element).typeahead({ hint: true, highlight: true, minLength: 1, limit: 5 }, { source: substringMatcher() });
    $(element).on("change", function () {
        if (!valueAllowUnset) {
            value(null);
            textBinding(null);
        }
    });
    value.subscribe(function (newValue) {
        if (newValue === null && !valueAllowUnset) {
            $(element).typeahead('val', '');
        }
    });
    $(element).on('typeahead:selected  typeahead:autocompleted', function (eventArgs, selected) {
        if (typeof selected === 'object') {
            value(selected.id);
            textBinding(selected.value);
        } else {
            value(null);
            textBinding(null);
        }
    });
}
};
ko.expressionRewriting.twoWayBindings['typeahead'] = true;

以下是其他相关 JS:

window.DashboardViewModel = function (startupLodge) {
    var self = this;
    self.selectedLodgeID = ko.observable();
    self.selectedLodgeText = ko.observable();
    self.selectedLodgeID.subscribe(function (newValue) {
        if (newValue) {
            SetLodgeText(newValue);  
    });
    var SetLodgeText = function (lodgeID) {
        for (var index = 0; index < self.lodgeList().length; ++index) {
            var lodge = self.lodgeList()[index];
            if (lodge.ID == lodgeID) {
                self.selectedLodgeText(lodge.Name);
            }
        }
    };
}

正如我之前提到的,我无法在Chrome或IE中重现这一点,只能在Firefox中重现。 如果我在 selectedLodgeID.subscribe(( 的开头放置一个断点,它会多次命中,尽管这是因为当我在第一个断点之后单击"继续"时,它相当于单击任何地方,如前所述会导致输入清除。

提前感谢您的帮助。

尝试valueUpdate : 'keyup'在用户释放 Enter 键后立即更新视图模型。

<input placeholder="Search for a lodge..." data-bind="typeahead: selectedLodgeID, value: selectedLodgeText, valueUpdate : 'keyup', suggestions: lodgeList, suggestionsText: 'Name', suggestionsValue: 'ID'" />