1

Webpage datalist autocomplete doesn't work as desired across all browsers. Populate datalist with lines from text file and would like the autocomplete to work by "startswith" rather than "contains"

Tried various methods but never works as desired.

<!DOCTYPE html>
<html>
  <head><title>Test Awa</title>
    </head>
  <body>    
<script type="text/javascript">
jobNamesFilePath='JobNames.txt';

var txtData = [];
async function fetchData()
{
    await
    fetch(jobNamesFilePath).then(res => res.text()).then(res =>
    {
        var options = '';
        txtData = res.split("\n");
        for(var i = 0; i < txtData.length; i++)
        {
            options += '<option value="'+txtData[i]+'" />';
        }
        document.getElementById('awaJobs').innerHTML = options;
    })
}

fetchData();

</script>

</br>

  <input list="awaJobs" name="awaJobsSearchText" style="width: 250px;">
  <datalist id="awaJobs">
  </datalist>
  <input type="submit">
  </body>
</html>

The text file can contain something like:

1 India
2 USA
3 UK 1
4 France 2

If you start searching in the datalist box, It should do it by startswith rather than contains. So if you type 2. It should only show "2 USA" not "4 France 2" (as currently happens on firefox)

Geshode
  • 3,600
  • 6
  • 18
  • 32
joshuabloom.co.uk
  • 11
  • 2
  • 1
    Possible duplicate of [How to make datalist match result from beginning only](https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only) – Geshode Sep 19 '19 at 06:13

0 Answers0