Question

我有一个字段#autoc1，用于自动完成。

一切正常，但我想在生成的UL的末尾添加一个项目，以便用户在自动填充功能找不到所需的内容时添加新项目。

我的想法是将生成的UL附加到文本输入中的焦点上，以便选项始终存在

我正在尝试以下但不能正常工作：

$(function() {
            $( "#autoc1" ).autocomplete({
                source: "/pages/includes/getAgent.php",
                minLength: 2,
                select: function( event, ui ) {
                    $('#autoc1').val(ui.item.agent_name);
                    $('#comm').val(ui.item.commission_percent);
                    return false;
                }
            }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                .append( "<a>" + item.agent_name + "</a>" )
                .appendTo( ul )
            };

            $('#autoc1').focus(function() {
                $('#ui-id-1').append('<li><a href="new.html">Add new</a></li>');
            });
});

这是自动生成的html

<ul style="display: none; width: 360px; top: 248px; left: 856.5px;" tabindex="0" id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">
    <li role="presentation" class="ui-menu-item">
        <a tabindex="-1" class="ui-corner-all" id="ui-id-2">agent a</a>
    </li>
    <li role="presentation" class="ui-menu-item">
        <a tabindex="-1" class="ui-corner-all" id="ui-id-3">agent b</a>
    </li>
</ul>

Answer 1

如果我理解了这种情况，如果您只是将<{em> {/ 1>}之后的“新项目”元素放在并根据具体情况显示/隐藏，它可能会更清晰。像这样：

<强> HTML

<ul>

<强> JS

<ul style="display: none; width: 360px; top: 248px; left: 856.5px;" tabindex="0" id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">
    ...
</ul>
<div id="new-item">
    <label>
        New item
        <input type="text" />
    </label>
</div>

在焦点上附加ul

1 个答案: