Jquery 聚焦

我有一个字段

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

$（函数（）{
$（“#autoc1”）.autocomplete({
来源：“/pages/includes/getAgent.php”，
最小长度：2，
选择：功能（事件、用户界面）{
$（'#autoc1'）.val（ui.item.agent_name）；
$（'comm'）.val（ui.item.commission_%）；
返回false；
}
}).data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.append（“
”）；
});
});

这是自动生成的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>

代理a


代理人b

如果我了解这种情况，如果您只是将“新项目”元素放在

后面，并根据情况显示/隐藏，它可能会工作得更干净。类似这样：

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">
    ...
</ul>
<div id="new-item">
    <label>
        New item
        <input type="text" />
    </label>
</div>

---

这不是问题的答案，但对我很有用，因为它给了我一个新的想法，非常接近你的建议。谢谢你。

$('#autoc1').focus(function() {
    $('#new-item').show();
});