2015-11-18 2 views
1

Я работаю с библиотекой select2, чтобы создать выпадающий список с использованием ajax. Я не могу заставить его работать. Вот мой код:select2 ajax не работает

$("#guests").select2({ 
     multiple: true, 
     minimumInputLength: 1, 
     formatInputTooShort: function() { 
      return "Enter 1 Character"; 
     }, 
     data: function() { 
      return data; 
     }, 
     ajax: { 
      url: 'some url', 
      dataType: 'json', 
      processResults: function (data) { 
       // 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 

       return { 
        results: data.data, 
        pagination: { 
         more: 30 
        } 
       } 
      } 
      /*, 
      cache: true*/ 
     }, 
     escapeMarkup: function (markup) { return markup; }, 
     templateResult: formatRepo, 
     templateSelection: formatRepoSelection 
    }) 

    function formatRepo (results) { 

     var markup = "<div class='select2-result-resultssitory clearfix'>" + 
       "<div class='select2-result-resultssitory__avatar'><img src='" + results.id + "' /></div>" + 
       "<div class='select2-result-resultssitory__meta'>" + 
       "<div class='select2-result-resultssitory__title'>" + results.text + "</div>"; 

     if (results.description) { 
      markup += "<div class='select2-result-resultssitory__description'>" + results.guest_first_name + "</div>"; 
     } 

     markup += "<div class='select2-result-resultssitory__statistics'>" + 
       "<div class='select2-result-resultssitory__forks'><i class='fa fa-flash'></i> " + results.guest_last_name + " Forks</div>" + 
       "<div class='select2-result-resultssitory__stargazers'><i class='fa fa-star'></i> " + results.guest_do_b + " Stars</div>" + 
       "<div class='select2-result-resultssitory__watchers'><i class='fa fa-eye'></i> " + results.text + " Watchers</div>" + 
       "</div>" + 
       "</div></div>"; 

     return markup; 
    } 

    function formatRepoSelection(results) { 
     return results.text || results.guest_first_name; 
    } 

HTML:

<select id="guests" class="form-control input-guests " data-placeholder="Search guest..." multiple=""></select> 

здесь данные JOSN я получаю от удаленного URL:

[{ 
    "id": 1, 
    "guest_first_name": "Jon", 
    "guest_last_name": "Doe", 
    "guest_do_b": "1954-07-13T00:00:00+0100", 
    "text": "Jon Doe" 
}, { 
    "id": 2, 
    "guest_first_name": "Janne", 
    "guest_last_name": "Doe", 
    "guest_do_b": "1960-01-14T00:00:00+0100", 
    "text": "Janne Doe" 
}] 
+0

Попробуйте это. Это может помочь: http://jsfiddle.net/marcrazyness/XMAq2/light/ – DinoMyte

+0

Не могли бы вы предоставить решение для 'select2 4.0', как это то, что я сейчас использую? –

ответ

0

Немного поздно, но ваша ошибка что options.results не определено?

Если это так, то вы можете переименовать функцию processResults в results

Я знаю, что в документации с помощью функции processResults, но у меня была такая же проблема, и this article было решение для меня.