select2 опции имеют одинаковый индекс id

Question

У меня есть меню выбора select2 (состояния из удаленных геобайтов), но я не могу выбрать параметры с тем же самым идентификационным индексом. Например, если я ищу «новый», я получаю некоторые параметры, и я могу выбрать первый вариант New Albany, IN. Затем, если я наберу «далеко», первым вариантом будет Far Hills, NJ. Когда я его выбираю, он показывает Олбани, IN, который имеет индекс 1.

Я попробовал пример для загрузки удаленных данных, https://select2.github.io/examples.html#data-ajax. Это не ведет себя так же, поэтому мне интересно, не ошибаюсь ли я в моих результатах. Каждый раз, когда она ищет его возвращает новый объект с индексами, начиная с 1.

$('#input_3_4').select2({ 
     ajax: { 
     url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US", 
     dataType: 'json', 
     quietMillis: 1500, 
     data: function (params) { 
      return { 
      q: params.term, // search term 
      page: params.page 
      }; 
     }, 
     processResults: function (data, params) { 
      for(var i = 0; i < data.length; i++){ 
      data[i] = {id:i+1, text:data[i]}; 
      } 
      // parse the results into the format expected by Select2 
      // since we are using custom formatting functions we do not need to 
      // alter the remote JSON data, except to indicate that infinite 
      // scrolling can be used 
      params.page = params.page || 1; 
      console.log(data); 
      return { 
      results: data, 
      pagination: { 
       more: (params.page * 30) < data.total_count 
      } 
      }; 

     }, 
     cache: true, 
     }, 
     escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
     minimumInputLength: 3, 
     //templateResult: formatRepo, // omitted for brevity, see the source of this page 
     //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page 
    }); 

Answer 1

var dataIndex = 1; //<<=====HERE 
    //select2 state selector with geobytes remote data source 
    $('#input_3_4').select2({ 
     ajax: { 
     url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US", 
     dataType: 'json', 
     quietMillis: 1500, 
     data: function (params) { 
      return { 
      q: params.term, // search term 
      page: params.page 
      }; 
     }, 
     processResults: function (data, params) { 
      for(var i = 0; i < data.length; i++){ 
      data[i] = {id:dataIndex, text:data[i]}; //<<=====HERE 
      dataIndex++; //<<=====HERE 
      } 
      // parse the results into the format expected by Select2 
      // since we are using custom formatting functions we do not need to 
      // alter the remote JSON data, except to indicate that infinite 
      // scrolling can be used 
      params.page = params.page || 1; 
      console.log(data); 
      return { 
      results: data, 
      pagination: { 
       more: (params.page * 30) < data.total_count 
      } 
      }; 

     }, 
     cache: true, 
     }, 
     escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
     minimumInputLength: 3, 
     //templateResult: formatRepo, // omitted for brevity, see the source of this page 
     //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page 
    });