JQuery ui autocomplete - предложить с помощью внешнего json

Question

Я использую jquery ui autocomplete.

Моя проблема в том, что когда я использую вызов внешнего json, функция Suggest перестает работать.

$(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/

Это получает все данные один раз и заполнит массив. Затем Autocomplete может использовать это как обычно.