How should I adjust my code to create an autocomplete that start with first letter?

Question

I am trying to create an autocomplete search box.
It works, but there is one problem here is that it won't start with the first letter when user type on the search box.
If I type the first letter on the search box, it will show all words contain this letter, but I only want it show words start with this letter.
What should I do? I found out this happen in firefox, but it is OK in chrome.

var dataList = document.getElementById("auto_json_datalist");
 // Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
 // Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);
      // Loop over the JSON array.
      jsonOptions.forEach(function(item) {
        // Create a new <option> element.
        var option = document.createElement("option");
        // Set the value using the item in the JSON array.
        option.value = item;
        // Add the <option> element to the <datalist>.
        dataList.appendChild(option);
      });
    } else {
      // An error occured :(
    }
  }
};
 // Set up and make the request.
request.open("GET", "autocompleteSym.json", true);
request.send();

<datalist id="auto_json_datalist"></datalist>
<input type="text"  class="enter_sym_c" list="auto_json_datalist" value="" />

Answer 1

Here, try to add these changes:

var SUCCESS_CODE = 200,
  NEEDED_REQUEST_STATE = 4,
  dataList = document.getElementById("auto_json_datalist"),
  enteredData = document.getElementsByClassName("enter_sym_c")[0],
  // the data entered by the user
  request = new XMLHttpRequest();

// Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === NEEDED_REQUEST_STATE) {
    if (request.status === SUCCESS_CODE) {
      // Parse the JSON
      parseJSONOptions(request.responseText);
    } else {
      // An error occured :(
    }
  }
};

function parseJSONOptions(data) {
  var jsonOptions = JSON.parse(data);
  jsonOptions.forEach(function(item) {
    var itemString = new String(item["key"]); // you must know what is the key
    if (itemString.startsWith(enteredData.value)) {
      createOption(dataList, item);
    }
  });
}

function createOption(parent, value) {
  // Create a new <option> element.
  var option = document.createElement("option");
  // Set the value using the item in the JSON array.
  option.value = value;
  // Add the <option> element to the <datalist>.
  parent.appendChild(option);
}

// Set up and make the request.
request.open("GET", "autocompleteSym.json", true);
request.send();

You only need to take the string part that is already entered in the input and when you get the possible options - check each option, if it starts with the given substring and add it to the list, if this is true.

This solution covers also the cases for 2 characters, 3 characters etc.

Answer 2

This only requires a very simple if condition, that checks the first letter of the input value to see if it is equal to the first letter of the current item.
If this condition fails it will skip creating the option element.

This if condition looks like this:

if(inputBox.getAttribute("value").charAt(0) == item.charAt(0)) {}

The if condition gets the first letter of strings by using the String.prototype.charAt(...); function, and supplying 0 as the first (and only) argument.
If you don't know what String.prototype.charAt(...); is or you would like to know more about it you should read this MDN article.

The error item.charAt is not a function problem was caused because that the argument (function) inside jsonOptions.forEach accepts two arguments (not one).
These arguments are: index and value, the type of the index argument is number NOT string.
It is my fault for not spotting the problem, and for that I apologise.

Luckily the solution is pretty simple we just change this:

jsonOptions.forEach(function(item) {

To this:

// "i" stands for "index"
jsonOptions.forEach(function(i, item) {

I've corrected the problem and here is the edited JavaScript:

// Sorry for using "document.querySelector" I was far too lazy to use anything else :)
var dataList = document.querySelector("#auto_json_datalist");
var inputBox = document.querySelector(".enter_sym_i");
// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();
// Handle state changes for the request.
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);
      // Loop over the JSON array.
      // The function inside "forEach" accepts two arguments, "index" and "value".
      // The problem was that the "index" argument is a "integer" NOT a string.
      jsonOptions.forEach(function(index, value) {
        // !! This is the if condition that checks the first character of the input value
        if(inputBox.getAttribute("value").charAt(0) == value.charAt(0)) {
          // Create a new <option> element.
          var option = document.createElement("option");
          // Set the value using the item in the JSON array.
          option.setAttribute("value", value);
          // Add the <option> element to the <datalist>.
          dataList.appendChild(option);
        }
      });
    } else {
      // An error occured :(
    }
  }
};
// Set up and make the request.
request.open("GET", "autocompleteSym.json", true);
request.send();

NOTE: please remember that it is good practice to use element.getAttribute("..."); and element.setAttribute("...", "..."); to set and get attributes and deal with the DOM "as is" (I.E: dealing with literal text only), instead of using properties.
If you would like more information on this you should check this question out.

Good luck and all the best.