使用javascript预取加载外部数据集

嗨，我正在为我的网站中的搜索框构建一个自动完成功能。 我正在使用以下代码：

$(document).ready(function(){

var $terms = [ "aggretatibacter aphrophilus", "abiotrophia defectiva", "aerococcus viridans", "aggregatibacter actinomycetemcomitans", "aeromonas hydrophila", "aerococcus urinae", "actinobacillus ureae", "achromobacter xylosoxidans", "capnocytophaga gingivalis", "acinetobacter baumannii", "streptococcus pyogenes" ].sort(),
$return = [];

function strInArray(str, strArray) {
for (var j=0; j<strArray.length; j++) {
if (strArray[j].match(str) && $return.length < 5) {
  var $h = strArray[j].replace(str, '<strong>'+str+'</strong>');
  $return.push('<li class="prediction-item"><span class="prediction-text">' + $h + '</span></li>');
}
}
}

function nextItem(kp) {
  if ( $('.focus').length > 0 ) {
var $next = $('.focus').next(),
    $prev = $('.focus').prev();
}

if ( kp == 38 ) { // Up

if ( $('.focus').is(':first-child') ) {
  $prev = $('.prediction-item:last-child');
}

$('.prediction-item').removeClass('focus');
$prev.addClass('focus');

} else if ( kp == 40 ) { // Down

if ( $('.focus').is(':last-child') ) {
  $next = $('.prediction-item:first-child');
}

$('.prediction-item').removeClass('focus');
$next.addClass('focus');
}
}

$(function(){  
  $('#s').keydown(function(e){
$key = e.keyCode;
if ( $key == 38 || $key == 40 ) {
  nextItem($key);
  return;
}

setTimeout(function() {
  var $search = $('#s').val();
  $return = [];

  strInArray($search, $terms);

  if ( $search == '' || ! $('input').val ) {
    $('.output').html('').slideUp();
  } else {
    $('.output').html($return).slideDown();
  }

  $('.prediction-item').on('click', function(){
    $text = $(this).find('span').text();
    $('.output').slideUp(function(){
      $(this).html('');
    });
    $('#s').val($text);
  });

  $('.prediction-item:first-child').addClass('focus');

}, 50);
});
});

$('#s').focus(function(){
if ( $('.prediction-item').length > 0 ) {
  $('.output').slideDown();
}

$('#searchform').submit(function(e){
  e.preventDefault();
  $text = $('.focus').find('span').text();
  $('.output').slideUp();
  $('#s').val($text);
  $('input').blur();
  });
 });

 $('#s').blur(function(){
if ( $('.prediction-item').length > 0 ) {
  $('.output').slideUp();
}
});

});    

部分

但是什么是最好的方法呢？

你的

var $terms = [ "aggretatibacter aphrophilus", ... ].sort(),

可以使用以下方法从url加载：

---

欢迎加入！您在发布示例代码和一个非常清楚的问题时做得很好。但是，我看不出您的代码中是如何涉及数据列表的。你能详细解释一下吗？哦，对不起。我一定是想办法把它从其余的部分删掉了。我已经编辑了这个问题帖子。直接在document.ready函数之后。@saskaiwestra:需要更多帮助吗？嗨，帕特里克，谢谢你的回复。我已经将您的代码添加到我的代码中，并对其进行了测试，没有收到任何错误。但是，它不会从数据列表中加载名称。我必须安装JQuery getJSON吗？我已经安装了JQuery-1.10.2。您可以使用JQuery。您确定url返回JSON格式的数组吗？如示例链接中所示：。看起来是这样的：[“无营养聚集杆菌”、“无营养无营养无营养菌”、“绿色埃希菌”、“聚集放线菌”、“嗜水气单胞菌”、“尿埃希菌”、“尿放线杆菌”、“木氧酸无色杆菌”、“牙龈噬菌体”、“鲍曼不动杆菌”，“化脓性链球菌”]将

[

和

]

替换为

{

和

}

。

var $terms = [ "aggretatibacter aphrophilus", ... ].sort(),

$.getJSON( "yourUrl", function( data )
{
  var $terms = [];

  $.each( data, function( val )
  {
    terms.push( val );
  }
  );

  terms.sort();
});