追加焦点

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

提供我了解情况，如果您只是将“新项目”元素后<ul>并根据情况显示/隐藏。事情是这样的：

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> 

JS

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