将额外的行附加到 jqueryui 自动完成（即使自动完成没有任何匹配项）

Question

如何将额外的行添加到 jQueryUI 自动完成结果中？我已经实现了 Add additional link to jquery ui autocomplete list 如下所示，但如果自动完成没有任何匹配，它不会显示额外的行。

我试过的...

为了向 jQueryUI 自动完成结果附加一行，我想出了以下脚本。使用以下内容添加额外的行：

open: function( event, ui ) {
   $('<li id="add-new">Add New</li>')
   .on('click', function(event) {$("#dialog-add-new").dialog("open");})
   .appendTo('ul.ui-autocomplete');
}

我的实施存在三个问题：

如果没有结果与所选文本匹配，则不会显示新行。在输入中键入 "On"，您将看到它。在输入中键入 "xx"，它没有显示。我想我可以让服务器填充它，但看起来很浪费，我宁愿在客户端做。
如果我在页面上有两个 ul.ui-autocomplete 可能会有问题？
添加的行与自动完成行的外观不同。

第一项是最关键的。即使自动完成没有任何结果，应该如何向 jQueryUI 自动完成结果添加额外的行？

请参阅 http://jsbin.com/quyexu/1/ 查看以下脚本的现场演示。您可以忽略有关对话框的部分，因为它似乎正在工作。谢谢

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <style type="text/css">
        </style> 
        <script type="text/javascript"> 
            var source = [
                {value: "one",id: 1},
                {value: "two",id: 2},
                {value: "three",id: 3}
            ];
            $(function(){
                $("#autocomplete").autocomplete({
                    source: source,
                    minLength: 1,
                    focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
                    select: function(event, ui) {
                        console.log(ui)
                        $(this).val('');//.blur();
                        event.preventDefault(); // cancel default behavior which updates input field
                        $("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');
                    },
                    open: function( event, ui ) {
                        console.log(event,ui,this);
                        $('<li id="add-new">Add New</li>')
                        .on('click', function(event) {$("#dialog-add-new").dialog("open");})
                        .appendTo('ul.ui-autocomplete');
                    }
                });

                $("#dialog-add-new").dialog({
                    autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
                    open        : function() {},
                    buttons     : [
                        {
                            text    : 'ADD NEW',
                            "class"  : 'green wide',
                            click    : function() {
                                //Use Ajax to save value and get associated ID
                                var name=$('#new-name').val();
                                var id=123;
                                $("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
                                $("#autocomplete").val('').focus();
                                $(this).dialog("close");
                            }
                        },
                        {
                            text    : 'CLOSE',
                            "class"  : 'gray',
                            click    : function() {$(this).dialog("close");}
                        }
                    ]    
                });
            });
        </script>
    </head>

    <body>
        <input type="text" id="autocomplete" />
        <ul id="my-list"></ul>
        <div id="dialog-add-new" class="dialog" title="Add New">
            <form>
                <input type="text" name="new-name" id="new-name" />
            </form>
        </div>

    </body> 
</html>

Answer 1

要添加额外的行，请使用响应事件。 http://api.jqueryui.com/1.10/autocomplete/#event-response

http://jsbin.com/wokuma/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <style type="text/css">
        </style> 
        <script type="text/javascript"> 
            var source = [
                {value: "one",id: 1},
                {value: "two",id: 2},
                {value: "three",id: 3}
            ];
            $(function(){
                $("#autocomplete").autocomplete({
                    source: source,
                    minLength: 1,
                    focus: function( event, ui ) {event.preventDefault();$(this).val( ui.item.label );},
                    select: function(event, ui) {
                        console.log(ui)
                        $(this).val('');//.blur();
                        event.preventDefault(); // cancel default behavior which updates input field
                        if(ui.item.id===0){$("#dialog-add-new").dialog("open");}
                        else {$("#my-list").append('<li data-id="'+ui.item.id+'">'+ui.item.value+'</li>');}
                    },
                    response: function( event, ui ) {
                        console.log(event,ui,this);
                        ui.content.push({value:"Add New", id:0, label:"Add New"});
                    }
                });

                $("#dialog-add-new").dialog({
                    autoOpen: false,resizable: false,height: 200,width: 380, modal: true,
                    open        : function() {},
                    buttons     : [
                        {
                            text    : 'ADD NEW',
                            "class"  : 'green wide',
                            click    : function() {
                                //Use Ajax to save value and get associated ID
                                var name=$('#new-name').val();
                                var id=123;
                                $("#my-list").append('<li data-id="'+id+'">'+name+'</li>');
                                $("#autocomplete").val('').focus();
                                $(this).dialog("close");
                            }
                        },
                        {
                            text    : 'CLOSE',
                            "class"  : 'gray',
                            click    : function() {$(this).dialog("close");}
                        }
                    ]    
                });
            });
        </script>
    </head>

    <body>
        <input type="text" id="autocomplete" />
        <ul id="my-list"></ul>
        <div id="dialog-add-new" class="dialog" title="Add New">
            <form>
                <input type="text" name="new-name" id="new-name" />
            </form>
        </div>

    </body> 
</html>

将额外的行附加到 jqueryui 自动完成（即使自动完成没有任何匹配项）

Append extra row to jqueryui autocomplete (even if autocomplete doesn't have any matches)

javascript

jquery

jquery-ui

autocomplete