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

Question

我在 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 。这样做的好处是用户不必再次搜索他之前搜索过的运动员。

但是，一旦用户开始输入，自动完成就会再次接管，同时先前选择的值会消失。

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

Answer 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;
        }
    });

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

Autocomplete search box with initial values OnFocus

javascript

ajax

jquery-ui-autocomplete