追加焦點

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