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

我的实施有三个问题：

如果没有与所选文本匹配的结果，则不会显示新行。在输入中键入“开”，您将看到它。在输入中键入“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 autocomplete中追加额外的行（即使自动完成没有任何匹配）

1 个答案: