Question

我正在使用JQuery（1.9.1）自动完成下拉列表。我希望用户在下拉列表中键入系统名称，并在用户添加字符时更新下拉列表。我还希望有一个默认值为＆＃34;其他＆＃34;无论用户输入什么字符，始终显示在下拉列表的顶部。以下是它应该是什么样的截图：

这是我的ajax调用：

＆＃13;

        $.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);
                        }
                    });
                }
            }
        );

＆＃13;

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

＆＃13;

这是相应的html：

＆＃13;

                            <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>

＆＃13;

除非我点击＆＃34;其他＆＃34;否则下拉看起来就像我想要的那样。从下拉列表中我在chrome控制台和＆＃34;其他＆＃34;不会填充输入文本框：＆＃34;未捕获的TypeError：无法读取属性＆＃39;数据＆＃39;未定义＆＃34;。单击其他选项工作正常。

任何人都知道我做错了什么或有另一种方法来获得这种类型的下拉？我怀疑这个问题与自动完成与前置的交互有关，因为除了＆＃34;其他＆＃34;之外的所有选项。工作得很好。如果除了jquery自动完成之外还有其他方法可以做到这一点，我也会接受尝试。

Answer 1

我会尝试在你定义数组的前面添加'Other'选项，如下所示：

    $.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元素

Answer 2

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

答案中的格式不正确（我仍在努力确定HTML格式应该如何显示），但它看起来与你（和我！）试图完成的非常相似。

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

2 个答案: