Question

我正在尝试在Jquery自动完成对话框中执行选择字段。当此html元素可见时，该对话框会阻止用户单击它。关于如何覆盖单个元素的默认行为的任何提示？

或者可以在“自动填充”字段中使用“菜单”窗口小部件，以便我可以进行多层选择吗？

这是我尝试做的代码片段：

<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>

    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _create: function() {
            this._super();
            this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
        },
        _renderItem: function( ul, item ) {
                return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label +"</a>" )
                .appendTo( ul );
        },
        _renderMenu: function( ul, items ) {
            var that = this,
            currentCategory = "";
            ul.prepend('Please Select <select name="number" id="number"> <option>1</option> <option selected="selected">2</option> <option>3</option> </select>');
            $.each( items, function( index, item ) {
                var li;
                if ( item.category != currentCategory ) {
                    ul.append( "<br><li class='ui-autocomplete-category'><b>" + item.category + "</b></li>" );
                    currentCategory = item.category;
                }
                li = that._renderItemData( ul, item );
                if ( item.category ) {
                    li.attr( "aria-label", item.category + " : " + item.label );
                }
            });
        }
    });

    $( function()
    {   var availableTags = [{label:"Apple",category:"Red"},{label:"Strawberry",category:"Red"},{label:"Coconut",category:"Brown"},];
        $( "#tags" ).catcomplete(
        {   source: availableTags
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
Fruits: <input id="tags">
</div>

</body>
</html>

如何在Jquery自动完成对话框中进行选择？

0 个答案: