1

I have a inputfield which has a large (10000 items) datalist as a autocomplete source. The datalist is generated dynamically from serverside.

<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>

I can type in the inputfield and it will autocomplete using the typed characters. But it will match in the middle and not sort the datalist according to what I have typed in the inputfield.

Autocomplete

I want to sort the datalist items so that It will show the matched initial letters (For the example image, it will bring the Zinc Sulphate to the top). How can I do this without using an ajax call to the server using custom javascript?

desertSniper87
  • 795
  • 2
  • 13
  • 25
  • 1
    The snippet you posted already does this on my browser at least (Chrome) – MauriceNino Aug 05 '20 at 10:01
  • All your items in the picture have **Zinc Sulphate** in them, so I think the results are correct. – SMAKSS Aug 05 '20 at 10:03
  • 1
    Check this answer. It will help you: [https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only](https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only) – Edson Magombe Aug 05 '20 at 10:10
  • @MauriceNino I am using Chromium Version 84.0.4147.105 (Official Build) snap (64-bit). – desertSniper87 Aug 05 '20 at 10:11
  • 2
    You need to sort by relevance, not alphabetically. The quick and dirty way to do it, which would work in this case, is to get the index of the matching string (which would be 0 in the target item) and sort by that instead. – Rory McCrossan Aug 05 '20 at 10:12
  • 1
    @SMAKSS Yes sir. That is correct in one sense but I want to move the items that matches the start of the item to the top of the list. – desertSniper87 Aug 05 '20 at 10:12

1 Answers1

1

As eminent from this answer, it is really difficult to modify datalist matching behavior. So I used select2 with django-autocomplete-light to implement an ajax call to updated the selectfield using the following 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;

I would welcome any other answer that involves only html5/js.

desertSniper87
  • 795
  • 2
  • 13
  • 25