javascript - 使 JQuery 自动完成始终显示特定选项

Question

我正在使用 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);
                        }
                    });
                }
            }
        );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

这是相应的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>

这个下拉菜单看起来是我想要的方式，除非我从下拉菜单中单击“其他”，我在 chrome 控制台中收到此错误，并且“其他”不会填充输入文本框:“未捕获类型错误:无法读取属性'数据” '未定义”。单击其他选项效果很好。

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

Answer 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 元素