JQuery自動完成將項目添加到呈現的下拉菜單

我想知道是否有任何方法可以在已經呈現的下拉自動完成菜單中追加新項目。JQuery自動完成將項目添加到呈現的下拉菜單

我想要做的是從服務器獲取固定數量的結果，並顯示一個「Show More ...」鏈接。如果選中，此鏈接應該啓動另一個Ajax查詢並在同一個下拉列表中加載更多項目。

有什麼意義？我也不確定我是否在過度使用它，並且有更簡單的方法來執行相同的任務。

編輯1

我目前擁有的代碼是類似這樣的東西：

$(function() { 
     $("#srchOperator").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "someURL", 
        type: "POST", 
        dataType: "JSON", 
        data: JSON.stringify(somePostData), 
        success: function (data) { 
         response($.map(data), function(item) { 
          return { 
           label: item.fields['op'], 
           id: item._id 
          } 
         }); 
         var totalResults = data.total 
         if (totalResults - 10 > 0) { 
          $('.ui-autocomplete').append('<li ' + 
            'class=ui-menu-item><a ' + 
            'href="#">(' + (totalResults - 10) + 
            ' more...)</a></li>'); 
         } 
        }, 
       }); 
      }, 
      minLength: 2, 
     }) 
    });

第一個AJAX調用將只檢索10個元素和「更多」鏈接應執行一個ajax調用，將項目追加到其回調下拉菜單中。

來源

2015-10-16 Facundo Fabre

如果可以的話，請您發佈一個代碼片段 – TimCodes

我添加了一小段代碼。我希望現在更容易理解。 –

你的方式，你可以隱藏其餘的使用CSS。

.ui-autocomplete li:nth-of-type(1n+10) { 
    display: none; 
} 

.ui-autocomplete li.moreResults { 
    display: block; 
}

的JavaScript的鏈接看起來像：

$('.moreResults').click(function(){ 
    $('.ui-autocomplete li').show(); 
});

請注意，我添加了一個類的鏈接從常規項目進行區分。如果鏈接是在聲明此函數後創建的，則需要使用on函數，如：

$(document).on('click','.moreResults',function(){ 
    $('.ui-autocomplete li').show(); 
});

這應該有所斬斷。在旁註中，我個人會重新構造它，以便只抓取最初需要的結果，因爲它會加載得更快，並在您點擊更多時加載下一組。

來源

2015-10-16 19:37:22 fanfavorite

結果從elasticsearch加載。我想要做的是加載前10個自動完成結果時鍵入和加載其他人點擊鏈接（與另一個Ajax調用）。我沒有所有的項目來展示一些，只是隱藏其他項目。 –

JQuery自動完成將項目添加到呈現的下拉菜單

回答

相關問題