使 JQuery 自动完成始终显示特定选项答案

【问题标题】：Make JQuery autocomplete Always show specific option使 JQuery 自动完成始终显示特定选项
【发布时间】：2017-05-19 08:33:48
【问题描述】：

我正在使用 JQuery(1.9.1) 自动完成下拉菜单。我希望用户在下拉列表中键入系统名称，并在用户添加字符时更新下拉列表。无论用户输入什么字符，我还希望下拉列表顶部始终显示默认值“其他”。这是它应该是什么样子的屏幕截图：

这是我的 ajax 调用：

        $.ajax({
                type: 'POST'
                , url: '/test/get_BackendSystems'
                , dataType: 'json'
                , success: function (response) {
                    if (response.success) {
                        backend_systems = [];
                        $.each(response.backend_systems, function (id,system_object) {
                            backend_systems.push(system_object["system"]);
                        });
                    }
                    $("#BackEnd").autocomplete({
                        source: backend_systems,
                        open: function(){
                            $(this).data("autocomplete").menu.element.addClass("backend_dropdown");
                            $('.backend_dropdown').prepend('<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all ui-add-new" tabindex="-1">Other</a></li>');
                            $('.backend_dropdown').width(432);
                        }
                    });
                }
            }
        );

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

这里是对应的html：

                            <div class='referral wrapper'>
                                <input list="POS_options" name="data[Account][backend_system]" type="text" class="required" placeholder="Back-End System" maxlength="150" id="BackEnd">
                            </div>

Thie 下拉列表看起来是我想要的方式，除非我从下拉列表中单击“其他”，我在 chrome 控制台中收到此错误，并且“其他”没有填充输入文本框：“未捕获的类型错误：无法读取属性数据'未定义的”。单击其他选项可以正常工作。

有人知道我做错了什么，或者有其他方法来获得这种类型的下拉菜单吗？我怀疑这个问题与自动完成与 prepend 的交互有关，因为除了“其他”之外的所有选项都可以正常工作。如果除了 jquery 自动完成之外还有其他方法可以做到这一点，我也愿意尝试。

【问题讨论】：

您是否有实时页面，以便我们可以查看和测试小部件？
不，很遗憾我没有。但我很确定这个问题与我如何添加“其他”有关，因为下拉列表中的所有其他元素都没有问题。

标签： javascript jquery html ajax autocomplete

【解决方案1】：

我会尝试在定义数组的位置添加“其他”选项，如下所示：

    $.ajax({
            type: 'POST'
            , url: '/test/get_BackendSystems'
            , dataType: 'json'
            , success: function (response) {
                if (response.success) {
                    backend_systems = ["Other"];
                    $.each(response.backend_systems, function (id,system_object) {
                        backend_systems.push(system_object["system"]);
                    });
                }
                $("#BackEnd").autocomplete({
                    source: backend_systems,
                    open: function(){
                        $(this).data("autocomplete").menu.element.addClass("backend_dropdown");
                        $('.backend_dropdown').width(432);
                    }
                });
            }
        }
    );

我还删除了前置 li 元素

【讨论】：

我试过这个，虽然它确实消除了我在单击“其他”时遇到的错误，但它也使“其他”根据用户输入和其余选项被过滤。无论输入如何，我都试图让“其他”始终成为下拉列表中的第一个选项。
好吧，你将不得不改变你的后端系统的源代码，返回你的 json 文件的脚本你必须包含在“其他”中。我没有其他方法害怕：|

【解决方案2】：

你看到这里的答案了吗？ Always show a specific choice in jQuery Autocomplete even if it doesn't match input

答案中的格式不正确（我仍在研究它以确定 HTML 格式的显示方式），但它似乎与您（和我！）试图完成的非常相似。

【讨论】：