时间戳

首页 > 解决方案 > 根据输入字段对数据列表项进行排序

javascript - 根据输入字段对数据列表项进行排序

问题描述

我有一个输入字段，其中有一个大（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>

我可以在输入字段中输入，它会使用输入的字符自动完成。但它会在中间匹配，而不是根据我在输入字段中输入的内容对数据列表进行排序。

自动完成

我想对数据列表项进行排序，以便显示匹配的首字母（对于示例图像，它将硫酸锌带到顶部）。如何在不使用自定义 javascript 对服务器进行 ajax 调用的情况下做到这一点？

标签： javascripthtmljqueryjquery-select2

解决方案

从这个答案中可以看出，修改数据列表匹配行为真的很困难。因此，我使用select2withdjango-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 的答案。

推荐阅读