Is there a way to show datalist options that don't match user input?

Question

I've got two elements, a datalist and an input :

<datalist id="choices"></datalist>

<input id="custom_id" name="custom_name" type="text" value="" list="choices" class="medium-field"/>

Additionally,here is an AJAX request, which populates the datalist (this works; not my issue)

var params = {
    "partial": $("#custom_id").value;
};
$.ajax({
      cache: true,
      url: "http://www.example.com",
      type: "POST",
      data: JSON.stringify(params),  // contains the input.value
      contentType: "application/json",
      headers: {
        "Range": "0-9"
      },
      dataType: "json",
      processData: false,
      // On success, create <option> elements and append them to datalist
      success: function(data) { .. };

The data returned by the REST endpoint is formatted like so:

[
  { 
    "label": "active",
    "name": "iron"
  }, 
  ..
]

Basically the AJAX request hits a REST endpoint in front of a PostgreSQL db that does runs a SELECT based on the provided partial parameter, and returns a 2-column table (which gets formatted as the above response).

However, I have situations where the data returned from the AJAX request is spelled differently from the user's input; for example, when input.value = 'magnet' , I sometimes return a list of options where a few might read 'iron' .

The problem : due to 'iron' being spelled differently than 'magnet' , the user won't see this option in the datalist dropdown (even though the option element is created) unless the user actually types 'iron' . Is there a way for me to display 'iron' in the datalist even though it doesn't match what the user has typed?

Answer 1

As far as I can understand your question, you are willing to show the synonyms as a result when an input is typed in the search box, ie if a user types magnet , he shall see the synonyms to 'magnet', which in this case happens to be iron What you can do is when the ajax hit is sent to example.com I understand that there is some SQL code as SELECT keyword FROM table_name WHERE keyword LIKE '%<whatever string is in data>%' . This would return 'magnet' even if the user types mag. Now coming to returning 'iron' and 'magnet' when a user types say 'mag' You will have to modify the table a little bit as follows: 1. Create a keywords table having columns: id, keyword and synonym_to_keyword 2. Enter the data like (1, 'iron' , null) (2,'magnet',1)

3. Now modify the query as: SELECT id as I, keyword FROM table_name WHERE keyword like '%<whatever string is in data>%' OR keyword like (SELECT keyword FROM table_name WHERE synonym_to_keyword = I)

Note that you will have to maintain a list of keywords and probable synonyms to the keywords so that the user sees all the probable options (like magnet, iron, etc) when he types 'magnet'.

Answer 2

Since Chrome will compare both the value and label to see if it should show the datalist option, you can set all of your option labels to the value you have in your input for them to show up.

Relevant Chromium patch

Code Example below:

 function autoSuggestAddress(input) { if (input.value) { // dummy data let suggestions = ["Example 1", "Example 2", "Example 3"]; // clear old datalist let datalist = input.list; while (datalist.hasChildNodes()) { datalist.removeChild(datalist.firstChild); } suggestions.forEach((item) => { let option = document.createElement("option"); option.label = input.value; option.value = item; datalist.appendChild(option); }); } }

 <form method="GET" id="search-form"> <label for="address">Address</label> <input type="text" id="address" name="address" form="search-form" oninput="autoSuggestAddress(this)" type="search" value="" required autocomplete="off" list="suggestions" /> <datalist id="suggestions"> </datalist> </form>