Фильтруйте первые два символа пользовательского ввода и извлекайте из внешней базы данных любые совпадения слов, начиная с отфильтрованного ввода - PullRequest
Новая
       24

Фильтруйте первые два символа пользовательского ввода и извлекайте из внешней базы данных любые совпадения слов, начиная с отфильтрованного ввода

0 голосов
/ 15 мая 2018

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

Я использую Bootstrap 4.0 для элементов управления страниц и ASP.NET 4.6 framework / C # back end code. Я не очень знаком с Javascript, но если это лучший способ справиться с этим (с точки зрения производительности при запросе таблиц примерно из 1800 записей), то это то, что я буду делать.

Что я ищу, так это некоторые предложения или примеры кода о том, как лучше всего с этим справиться У меня мало времени, и это новая основа для меня. Я искал повсюду и не нашел ничего, что могло бы указать мне направление, в котором я должен идти.

FWIW, это не для школьного проекта.

1 Ответ

0 голосов
/ 15 мая 2018

Вы можете использовать Выбрать 2 плагин .Взгляните на пример Ajax.Вам нужно получить данные с помощью вызова ajax, когда пользователь вводит 2 символа в поле поиска, тогда вы можете удаленно вызвать метод контроллера для возврата данных из БД.Вам нужно немного изменить методы formatRepo и formatRepoSelection, чтобы изменить результаты отображения в окне поиска.

HTML-код: 

<select class="js-data-example-ajax"></select>

Код Javascript: 

   $(".js-example-data-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // 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;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  placeholder: 'Search for a repository',
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo,
  templateSelection: formatRepoSelection
});

function formatRepo (repo) {
  if (repo.loading) {
    return repo.text;
  }

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

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

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
  "</div>" +
  "</div></div>";

  return markup;
}

function formatRepoSelection (repo) {
  return repo.full_name || repo.text;
}

Контроллеркод: 

public class YourModel{
   public int ID {get; set;}
   public string Value{get; set;
}

public JsonResult repositories(string searchterm){
     List<YourModel> result = //db call using search term
     return Json(result, , JsonRequestBehavior.AllowGet);
}
...