具有初始值 OnFocus 的自动完成搜索框答案

【问题标题】：Autocomplete search box with initial values OnFocus具有初始值 OnFocus 的自动完成搜索框
【发布时间】：2019-11-15 14:03:32
【问题描述】：

我在www.swimstats.net 上集成了以下自动完成功能：

    $("#athleteName1").autocomplete({
        minLength: 3,
        delay: 300,
        source: function (request, response) {
            $.ajax({
                type: "POST",
                url: "/query_athletes",
                data: { first: $('#athleteName1').val() },
                success: response,
            });
        }
    }).focus(function () {
        console.log('Populate');        
        });

我正在寻找一种解决方案，当输入字段 #athleteName1 获得焦点时，该解决方案可以向用户显示最多 5 个先前选择的值。 Aspired "OnFocus" Behavior 。这样做的好处是用户不必再次搜索他之前搜索过的运动员。

但是，一旦用户开始输入，自动完成功能应该会再次接管，而之前选择的值会消失。

知道如何构建一个漂亮而干净的解决方案来实现这一目标吗？

【问题讨论】：

标签： javascript ajax jquery-ui-autocomplete

【解决方案1】：

不确定这是否是最优雅的方式，但确实可以：

    $("#athleteName1").autocomplete({
        minLength: 0,
        delay: 300,
        source: function (request, response) {
            if ($( "#athleteName1" ).val().length == 0) {
                response(['banana','apple', 'orange']);
                return;
            }
            $.ajax({
                type: "POST",
                url: "/query_athletes",
                data: { first: $('#athleteName1').val() },
                success: response,
            });
        },
    }).focus(function () {
        if ($( "#athleteName1" ).val().length == 0) {
            $( "#athleteName1" ).autocomplete("search");
            return;
        }
    });

【讨论】：