CODEWITHSUNDEEP
javascript
PineappleBros
PineappleBros

Reputation: 55

Autocomplete dropdown list

I'm trying to create an autocomplete dropdown list for addresses. JS pushing the dropdown list value into the input field. But it only detects similarity if I am entering city at first. How to make it detect similarity by entering city or/and street (does not matter what goes first)? Any help would be much appreciated.

function autocomplete(inp, arr) {
  var currentFocus;
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      a = document.createElement("div");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      this.parentNode.appendChild(a);
      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("div");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) { //up
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          /*and simulate a click on the "active" item:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}
 
var countries =
["city1, street1",
"city2, street2",
"city3, street3",
"city4, street4",
"city5, street5",
"city6, street6",
"city7, street7",
"city8, street8",
"city9, street9",
"city10, street10"];
 
autocomplete(document.getElementById("address"), countries);

Upvotes: 1

Views: 1229

Answers (1)

Agan
Agan

Reputation: 497

Use filter method for this and not:

// This checks only if array[i] starts with value and not if array[i] includes this value.
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {}

This should help:

let inArray = arr.filter((address) => address.includes(yourInput));

Check output:

var arr = ["Madrid, Gran Vía 1"];
var val = "Gra";
var val2 = "Mad";
//Showing "Madrid, Gran Vía 1"
console.log("Filter: " + arr.filter((address) => address.includes(val)));
//Your function is showing false
console.log(arr[0].substr(0, val.length).toUpperCase() == val.toUpperCase());

//Showing "Madrid, Gran Vía 1"
console.log("Filter: " + arr.filter((address) => address.includes(val2)));
//Your function is showing true
console.log(arr[0].substr(0, val2.length).toUpperCase() == val2.toUpperCase());

Upvotes: 1

Related Questions