Сортировка элементов списка данных на основе поля ввода - PullRequest
Новая
       31

Сортировка элементов списка данных на основе поля ввода

0 голосов
/ 05 августа 2020

У меня есть поле ввода, в котором есть большой (10000 элементов) список данных в качестве источника автозаполнения. Список данных создается динамически со стороны сервера. 

<input type="text" name="medicine" required="" list="list__medicine-list" id="id_medicine" class="form-input mb-4">
<datalist id="list__medicine-list">
   <option value="1stCef (Cefadroxil Monohydrate)" medicine_id="1"></option>
   <option value="2ndCef (Cefaclor Monohydrate)" medicine_id="2"></option>
   <option value="3-C (Cefixime Trihydrate)" medicine_id="3"></option>
   <!-- -->
   <!-- -->
   <!-- -->
  <option value="Zinc (Zinc Sulphate)" medicine_id="11303"></option>
</datalist>

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

Автозаполнение

Я хочу отсортировать элементы списка данных так, чтобы в нем отображались совпадающие начальные буквы (для примера изображения он выведет Zin c сульфат наверх). Как я могу сделать это без использования ajax вызова на сервер, используя пользовательский javascript?

1 Ответ

0 голосов
/ 05 августа 2020

Как видно из этого ответа , действительно сложно изменить поведение сопоставления списков данных. Поэтому я использовал select2 с django-autocomplete-light для реализации вызова ajax для обновления поля выбора, используя следующее SQL. 

SELECT * FROM {table_name}
WHERE {table_name}.brand_name LIKE '%%{query}%%'
    OR {table_name}.generic_name LIKE '%%{query}%%'
ORDER BY CASE
    WHEN {table_name}.brand_name LIKE '{query}%%' THEN 1
    WHEN {table_name}.generic_name LIKE '{query}%%' THEN 2
    WHEN {table_name}.brand_name LIKE '%%{query}%%' THEN 3
    WHEN {table_name}.generic_name LIKE '%%{query}%%' THEN 4
    WHEN {table_name}.brand_name LIKE '%%{query}' THEN 5
    WHEN {table_name}.generic_name LIKE '%%{query}' THEN 6
END;

Я приветствовал бы любой другой ответ, который включает только html5 / js.

...