Select2 ajax запрос к Django rest framework

При использование select  нужно будет подгружать для option много данных. Выход есть - использовать альтернативу -  select2.
Далее, привожу пример AJAX подгрузки данных для select2 из django rest framework

{% block javascript %}
  <script>
    $(document).ready(function() {
      $("#select-person").select2({
        language: "ru",
        placeholder: "Введите ФИО человека",
        ajax: {
          url: "/api/company/people/", //drf url для people
          dataType: 'json',
          delay: 300,
          data: function (params) {
            return {
              name: params.term, //name - api поле для поиска, params.term - данные из поля поиска
              //page: params.page
            };
          },
          processResults: function (data, params) {
            params.page = params.page || 1;
            //console.log(data.results); //drf возвращает данные в results
            //console.log(data.count); //drf возвращает количество записей в count
            return {
              results: data.results, //берем из json ответа results
              pagination: {
                more: (params.page * 30) < data.count
              }
            };
          },
          cache: true
        },
        //debug: true,
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1, //минимальное количество символов для запроса
        templateResult: function(results) {
          return results.name; //берем для select option поле модели - name
        },
        templateSelection: function(results) {
          return results.name || results.text;
        }
      });
    });
  </script>
{% endblock %}
 
{% block body %}
  <select class="form-control" id="select-person">
    <!--
    <option value="" selected="selected"></option>
    -->
  </select>
{% endblock %}


Для django также имеется django-select2 и django-easy-select2

Django ajax обновление данных на странице

Имеем веб страницу index.html, на которой необходимо обновлять данные (без перезагрузки всей страницы), т.е. сделать AJAX запрос. На странице имеется поле ввода номера телефона и подгрузка другой страницы - {% include 'phone-filter.html' %}


        <form>
          <div>
            <label>Номер:</label>
            <input type="text" id="phone" placeholder="Введите номер телефона">
          </div>
        </form>

        <div class="phone-filter">
          <!-- Подгружаю номера телефонов из фильтра -->
          {% include 'phone-filter.html' %}
        </div>

Код страницы phone-filter.html, это то что будет обновлятся на странице index.html

{% if phonenumbers%}
  <ul>
  {% for phonenumber in phonenumbers %}
    <li>
      <a href="{{ phonenumber.get_absolute_url }}">{{ phonenumber }}</a>
    </li>
  {% endfor %}
  </ul>
{% else %}
  По вашему запросу ничего не найдено
{% endif %}


Добавляю jQuery скрипт на страницу index.html, который обрабатывает ввод данных поля id="phone"

<script>
    $("#phone").keyup(function(){
      console.log(this.value);
      $('.phone-filter').html('').load(
        "{% url 'phone-filter' %}?phone=" + this.value
      );
    });
</script>

т.е. при вводе данных в поле phone будет грузиться страница phone-filter.html (тот самый AJAX запрос, который и нужно реализовать)

В urls.py добавляю

    url(r'^phone-filter/', views.phone_filter, name='phone-filter'),


В views.py создаю функцию ответа за запрос

def phone_filter(request):
    if request.method == 'GET':
        queryset = PhoneNumber.objects.filter(is_deleted = False)
        phone = request.GET.get('phone')
   
        if phone:
            queryset = queryset.filter(phone__contains=phone)
   
        response = render(
            request,
            'phone-filter.html',
            {'phonenumbers':queryset}
        )
    
        return response


Это всё, что нужно сделать для динамической AJAX подгрузки данных из базы, без обновления всей страницы.