根据输入字段对数据列表项进行排序答案

【问题标题】：Sorting datalist items based on input field根据输入字段对数据列表项进行排序
【发布时间】：2020-08-05 09:59:04
【问题描述】：

我有一个输入字段，其中包含一个大型（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 调用的情况下做到这一点？

【问题讨论】：

您发布的 sn-p 至少已经在我的浏览器上执行此操作（Chrome）
你图片中的所有物品都含有硫酸锌，所以我认为结果是正确的。
检查这个答案。它会帮助你：https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only
您需要按相关性排序，而不是按字母顺序。在这种情况下可行的快速而肮脏的方法是获取匹配字符串的索引（在目标项中为 0）并按此排序。
@SMAKSS 是的，先生。这在某种意义上是正确的，但我想将与项目开头匹配的项目移动到列表顶部。

标签： javascript html jquery jquery-select2

【解决方案1】：

正如this answer 中的佼佼者，修改数据列表匹配行为确实很难。所以我使用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 的答案。

【讨论】：