jquery ui自動完成 - 與外部json建議

Question

我正在使用jquery ui自動完成。

我的問題是當我使用一個外部json的調用，建議功能停止工作。我的代碼

$(document).ready(function() { 
    $('.comu').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json", 
     dataType: "json", 
     success: response 
     }); 
    }, 
    minLength: 0, 
    autoFocus: true, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(".comu").val(ui.item.label); 
    }, 
    }); 
}); 

例子：codepen

提前感謝！

Answer 1

我懷疑你可能已經找到某人已經回答了這個問題。但這裏有一個解決方案。

$(document).ready(function() { 
    $('.comu').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json", 
     dataType: "json", 
     success: function(jData) { 
      var results = []; 
      $.each(jData, function(ind, val) { 
      if (val.label.toLowerCase().indexOf(request.term) === 0) { 
       results.push(val); 
      } 
      }); 
      response(results); 
     } 
     }); 
    }, 
    minLength: 0, 
    autoFocus: true, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(".comu").val(ui.item.label); 
    }, 
    }); 
}); 

工作實例：https://jsfiddle.net/Twisty/mL3h8pm0/

的AJAX請求將只返回所有的結果，那就是要傳遞什麼到你的response。所以如果你在把它傳遞給response之前沒有把它過濾掉，你總是會得到一個完整的列表。

此過濾器使用indexOf()列表，但您可以使用任何您想要的方法。

這裏是另一個解決方案，將削減你的HTTP開銷：

var m = []; 
$(document).ready(function() { 
    $.getJSON("https://raw.githubusercontent.com/edusl/test/master/municipios1.json", function(result) { 
    $.each(result, function(ind, val) { 
     m.push(val); 
    }); 
    }); 

    $('.comu').autocomplete({ 
    source: m, 
    minLength: 0, 
    autoFocus: true, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(".comu").val(ui.item.label); 
    }, 
    }); 
}); 

工作實例：https://jsfiddle.net/Twisty/mL3h8pm0/2/

這一次得到所有的數據和填充的數組。然後自動完成可以像正常一樣使用它。