讓JQuery自動完成始終顯示特定選項

Question

我正在使用JQuery（1.9.1）自動完成下拉列表。我希望用戶在下拉列表中輸入系統名稱，並在用戶添加字符時更新下拉列表。我也希望有一個默認值的「其他」總是出現在下拉的頂部，而不管用戶輸入什麼字符。這裏是它應該是什麼樣子的截圖：

這裏是我的Ajax調用爲：

 $.ajax({ 
 
       type: 'POST' 
 
       , url: '/test/get_BackendSystems' 
 
       , dataType: 'json' 
 
       , success: function (response) { 
 
        if (response.success) { 
 
         backend_systems = []; 
 
         $.each(response.backend_systems, function (id,system_object) { 
 
          backend_systems.push(system_object["system"]); 
 
         }); 
 
        } 
 
        $("#BackEnd").autocomplete({ 
 
         source: backend_systems, 
 
         open: function(){ 
 
          $(this).data("autocomplete").menu.element.addClass("backend_dropdown"); 
 
          $('.backend_dropdown').prepend('<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all ui-add-new" tabindex="-1">Other</a></li>'); 
 
          $('.backend_dropdown').width(432); 
 
         } 
 
        }); 
 
       } 
 
      } 
 
     );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

下面是相應的HTML：

      <div class='referral wrapper'> 
 
           <input list="POS_options" name="data[Account][backend_system]" type="text" class="required" placeholder="Back-End System" maxlength="150" id="BackEnd"> 
 
          </div>

下拉下來看起來我想要的方式，除非我從下拉列表中單擊「其他」我在鉻控制檯中出現此錯誤，並且「其他」不填充輸入文本框：「未捕獲TypeError：無法讀取屬性'數據「未定義」。點擊其他選項正常工作。

任何人都知道我做錯了什麼或有其他方法來獲得這種類型的下拉？我懷疑這個問題與自動完成與前置的交互有關，因爲除「其他」之外的所有選項都可以正常工作。如果除了jquery自動完成之外還有其他方法可以做到這一點，我也會公開嘗試。

Answer 1

我會嘗試在前面加上「其他」選項中，可以定義數組，像這樣：

$.ajax({ 
      type: 'POST' 
      , url: '/test/get_BackendSystems' 
      , dataType: 'json' 
      , success: function (response) { 
       if (response.success) { 
        backend_systems = ["Other"]; 
        $.each(response.backend_systems, function (id,system_object) { 
         backend_systems.push(system_object["system"]); 
        }); 
       } 
       $("#BackEnd").autocomplete({ 
        source: backend_systems, 
        open: function(){ 
         $(this).data("autocomplete").menu.element.addClass("backend_dropdown"); 
         $('.backend_dropdown').width(432); 
        } 
       }); 
      } 
     } 
    ); 

我也去掉了前置li元素

Answer 2

你見過蘇答案嗎？ Always show a specific choice in jQuery Autocomplete even if it doesn't match input

格式在答案中是不正確的（我仍在通過它來確定HTML格式應該如何顯示），但它看起來與您（和我！）試圖完成的非常相似。