javascript - knockout 自动完成实现

Question

我现在正在为输入中的项目实现我自己的简单自动完成功能。一切都运行良好，停止输入脚本 500 毫秒后进行 AJAX 调用并接收来自后端的建议。我还在选择中的输入下方显示了它们。

问题是我不知道如何控制弹出窗口的可见性。当我在输入模糊时隐藏它时，我什至无法单击它，因为输入失去焦点并且弹出窗口立即被隐藏。更成问题的是，该弹出窗口显示在 Knockout 的 foreach/template 组合内，因此存在由多个 View 模型控制的多个输入。这使得使用 jQuery 跟踪输入+弹出区域之外的点击变得更加困难。

代码片段:

HTML(尝试跟踪 div 的焦点，失败):

<div class="form-group">
    <label>Name</label>
    <div class="autocomplete-container" tabindex="0" data-bind="hasFocus: nameFocused">
        <input type="text" class="form-control" placeholder="Name" data-bind="textInput: name, event: { change: changed }">
        <select class="autocomplete" size="5" data-bind="visible: showSuggestions, options: ingredientSuggestions, optionsText: 'name', value: selectedSuggestion"></select>
    </div>                    
    <span class="label label-danger" data-bind="validationMessage: name"></span>
</div>

相关 JS，项目 View 模型的一部分:

var autocompleteTimer = null;
var ingredientSuggestions = ko.observableArray();
var selectedSuggestion = ko.observable();
var nameFocused = ko.observable();
var suggestionsAvailable = ko.observable(false);
var showSuggestions = ko.computed(() => nameFocused() && suggestionsAvailable());

(...)

var suggestionsReceived = function(suggestions) {

    var newSuggestions = new IngredientSuggestions(suggestions);
    ingredientSuggestions(newSuggestions.suggestions);

    suggestionsAvailable(ingredientSuggestions().length > 0);
};

var requestSuggestions = function () {

    autocompleteTimer = null;

    recipeService.getIngredientSuggestions(name(), suggestionsReceived, null);
};

var nameChanged = function (newValue) {

    if (autocompleteTimer != null) {
        clearTimeout(autocompleteTimer);
    }

    autocompleteTimer = setTimeout(requestSuggestions, 500);
};

我尝试在输入或弹出窗口具有焦点时保持弹出窗口可见。但是，当我尝试单击弹出窗口时，输入“更快”地失去焦点，弹出窗口隐藏，因此不会收到点击，也不会获得焦点。

我应该如何隐藏建议弹出窗口？

Answer 1

我的建议是在 showSuggestions 中组合三个值:

1. 有什么建议
2. 搜索字段是否处于焦点
3. 建议选择框是否处于焦点

切换焦点时，会有一个短暂的时刻，没有任何东西处于焦点状态，从而隐藏建议框并不允许其获得焦点。这就是为什么您可能需要在计算的可见性中设置一个小的超时。

这是一个显示行为的工作示例:

const data = getData();

const query = ko.observable("");
const suggestions = ko.pureComputed(
  () => query().length
    ? data.filter(countryMatch(query().toUpperCase()))
    : []
);
  

const queryFocus = ko.observable(false)
const selectFocus = ko.observable(false);


const suggestionsAvailable = ko.pureComputed(
  () => !!suggestions().length
);

// The relevant part:
const showSuggestions = ko.pureComputed(
  () => suggestionsAvailable() && 
        (queryFocus() || selectFocus())
).extend({ deferred: true, rateLimit: 100 });


ko.applyBindings({ query, queryFocus, selectFocus, suggestions })


function countryMatch(q) {
  return c => [c.name, c.code]
    .join(" ")
    .toUpperCase()
    .includes(q);
};

function getData() { 
  return [{"name":"Afghanistan","code":"AF"},{"name":"Argentina","code":"AR"},{"name":"Belarus","code":"BY"},{"name":"Brazil","code":"BR"},{"name":"Cayman Islands","code":"KY"},{"name":"Congo, The Democratic Republic of the","code":"CD"},{"name":"Dominica","code":"DM"},{"name":"Faroe Islands","code":"FO"},{"name":"Germany","code":"DE"},{"name":"Guinea","code":"GN"},{"name":"India","code":"IN"},{"name":"Jersey","code":"JE"},{"name":"Latvia","code":"LV"},{"name":"Madagascar","code":"MG"},{"name":"Mayotte","code":"YT"},{"name":"Namibia","code":"NA"},{"name":"Niue","code":"NU"},{"name":"Paraguay","code":"PY"},{"name":"Russian Federation","code":"RU"},{"name":"Saudi Arabia","code":"SA"},{"name":"South Africa","code":"ZA"},{"name":"Syrian Arab Republic","code":"SY"},{"name":"Tunisia","code":"TN"},{"name":"United States Minor Outlying Islands","code":"UM"},{"name":"Yemen","code":"YE"}];
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input type="search" data-bind="textInput: query,
                                hasFocus: queryFocus"/>
<select size="5" data-bind="options: suggestions,
                            optionsText: 'name',
                            hasFocus: selectFocus,
                            visible: showSuggestions">