Как динамически загружаться с удаленного сервера и показывать пользователю при наборе - PullRequest
Новая
       16

Как динамически загружаться с удаленного сервера и показывать пользователю при наборе

0 голосов
/ 14 апреля 2019

Мне нужно создать вход для выбора с помощью Select2 3.4.5v с этим требованием:

  1. Возможность множественного выбора
  2. возможность ввода и выбора опций, которых нет в списке.
  3. загрузка списка данных при вводе пользователем (зависит от запроса пользователя) (если запрос больше n символов)
  4. конечное значение ввода - это контакт выбранных элементов с символом-разделителем, таким как "|",
  5. выполнить миграцию на более новую версию Плагин Select2 невозможен для проекта

Мне нужно что-то вроде примера предложения тега, например: 

<input type="hidden" id="e12" style="width:300px" value="brown, red, green"/>   

$("#e12").select2({tags:["red", "green", "blue"]});

НО с удаленнымзагрузка данных.Я надеялся вызвать загрузку данных при изменении входа.(или даже при добавленном вводе)

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" style="width: 10px;">

, но ничего не срабатывает (кроме изменений, которые не полезны для моей ситуации).

может кто-нибудь помочь мне разобраться

1 Ответ

0 голосов
/ 14 апреля 2019

Что-то вроде этого должно помочь (это использует самую последнюю версию Select2). Он поддерживает множественный выбор, а также поиск, когда пользователь печатает. В этом примере он ищет GitHub репозитории.

Я бы также порекомендовал проверить их документацию , поскольку это очень помогло мне понять это.

CodePen зеркало 

$(document).ready(function() {
  $(".js-example-data-ajax").select2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term,
          page: params.page
        };
      },
      processResults: function(data, params) {
        params.page = params.page || 1;
        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    placeholder: 'Search Github for a repository',
    minimumInputLength: 1,
    multiple: true,
    templateResult: function(repo) {
      return repo.full_name;
    },
    templateSelection: function(repo) {
      return repo.full_name || repo.text;
    }
  });
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata" rel="stylesheet">
<link href="https://select2.org/assets/7c647dd1b60ff2b17a493d7f00a18e26.css" rel="stylesheet" />

<select class="js-example-data-ajax form-control" style="width: 300px;"></select>
...