jQuery自動完成大陣列（9500）性能

我正在將JSON文件加載到數組中，然後將該數組傳遞給jQuery自動完成以用作其數據源。jQuery自動完成大陣列（9500）性能

我想要實現的是當自動完成文本框有焦點顯示所有可用的選項，我已經設法得到這與下面的代碼工作。我遇到的問題是該陣列有大約9,500個條目，加載速度非常慢，是否有提高性能？或者對於大數組是9,500？

加載JSON文件

 $.getJSON("./json/airportdata.json", function(data){ 
      for (var i = 0, len = data.length; i < len; i++) { 
       arrival_airports.push(data[i]); 
       //console.log(data[i]); 
      } 
     });

自動填充代碼

 $("#ajax").autocomplete({ 
      source: departure_airports, 
      minLength: 3, 
      select: function(event, ui) { 
       $("#ajax").val(ui.item.value); 
      } 
     });

上聚焦觸發自動填充

 $("#ajax").focus(function() { 
      $(this).autocomplete("search", ""); 
     });

來源

2017-02-08 Neil Nand

你是不是顯示你如何加載數據，或者將它傳遞給插件 – charlietfl

@charlietfl遺憾，將在現在添加這些代碼片斷。 –

是的，9k單元陣列可能意味着麻煩。您是否有特定的理由提前加載所有可能的結果？您可能應該考慮在搜索時加載特定的記錄集。所以當用戶輸入搜索短語時，只有這樣你才能提取相關結果。即：

$('#search').autocomplete({ 
    source: 'serverSideToAcceptTheSearchPhrase.php', //you should expect the variable "term" to be sent via GET to this page on execution 
    minLength: 2, //optional > this will allow a trigger of the search only when 2 or more characters inserted 
    delay: 1000, // optional > this will allow a wait time of 1 sec between each keys before executing 
    select: function(event, ui) { 
     // function to trigger on "select" 
    }, 
});

來源

2017-02-08 15:24:10

提前加載它們的原因是設計/要求顯示完整列表。當時沒有意識到會有9,500個。從我可以告訴我的情況來看，不會在性能問題上出現問題，但我並不是那麼瞭解該領域的所有人，所以希望有一些我不知道的東西。 –

jQuery自動完成大陣列（9500）性能

回答

相關問題