Need Help Matching User Input with Array Data Javascript-CodePudding

Hello guys I'm new in learning HTML Javascript and CSS

I'm stuck at this javascript code, I'm trying to match user input on the searchbar with some city array list i already prepare, when the search result match the script will change the display style of element into showing the result of their search value, but untill now the result always showing false value.

is there any better way to do this? or is there something wrong with my code ? or something could help me solve this problem ?

I'm new sorry if this is a really basic problem Thank youu

 function searchRespond() {

    if (document.getElementById("myInput").value.match(cities))
    {
      document.getElementById("areaCovered").style.display = "block";
    }

    else {
      document.getElementById("areaNotCovered").style.display = "block";
      document.getElementById("searchResult").innerHTML = document.getElementById("myInput").value;
    }
  }
  var cities = ["Banda Aceh", "Bandar Lampung", "Banyuwangi", "Bandung", "Bali", "Batam", "Batu", "Bekasi", "Bengkulu", "Binjai", "Blitar", "Bogor", "Bukittinggi", "Cimahi", "Cirebon", "Denpasar", "Depok", "Dumai", "Gunungsitoli", "Jakarta", "Jambi", "Kediri", "Langsa", "Lhokseumawe", "Lombok", "Lubuklinggau", "Madiun", "Magelang", "Malang", "Medan", "Metro", "Mojokerto", "Padang", "Padang Sidempuan", "Padangpanjang", "Pagar Alam", "Palembang", "Pangkal Pinang", "Pariaman", "Pasuruan", "Payakumbuh", "Pekalongan", "Pekanbaru", "Pematangsiantar", "Prabumulih", "Prigi", "Probolinggo", "Sabang", "Salatiga", "Sawahlunto", "Semarang", "Serang", "Sibolga", "Solo", "Subussalam", "Sukabumi", "Sumbawa", "Sungaipenuh", "Surabaya", "Surakarta", "Tangerang", "Tangerang Selatan", "Tanjungbalai", "Tanjungpinang", "Tasikmalaya", "Tebing Tinggi", "Tegal", "Yogyakarta"];

 .HeadlineSearchContainer {
    position: relative;
    top: 100px;
    margin: auto;
    height: 159px;
  }
  
  .SearchCharacterStyle {
    font-family: Roboto;
    font-size: 12px;
    line-height: 24.82px;
    text-align: left;
  }
  
  .searchrespond {
    font-family: Roboto;
    font-size: 12px;
    line-height: 24.82px;
    text-align: left;
  }
  
  #areaCovered {
    display: none;
  }
  
  #areaNotCovered {
    display: none;
  }
  
  #fillArea {
    display: none;
  }

<div >
  <div >
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" >
    <form autocomplete="off" name="myForm">
      <div  style="width:300px;">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i ></i>
      </div>
      <input type="button" formtarget="_new" onclick="searchRespond()" name="input" value="Search">
      <div  id="searchRespond">
        <h id="areaCovered">YES! We cover your area destination</h>
        <h id="areaNotCovered">We don't cover your area destination yet
          <p id="searchResult"></p>
        </h>
        <h id="fillArea">Please fill your area destination first</h>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

To do what you require you can use filter() to match the user's input to values in your array. You would be best to perform a case-insensitive match, which can be done by converting both values to the same case.

Note that this logic sets the notifications as hidden before the logic runs, so that the previous state of the search is removed.

In addition, I made a couple of improvements to the code. Firstly I stored the relevant elements in variables instead of accessing the DOM every time. This is slightly more performant, and makes the code a lot easier to read. I also used addEventListener() to bind events instead of inline event handlers in the HTML, which are bad practice and shouldn't be used. Lastly I converted the <h> elements to <h2 /> in this demo, as there is no <h> element in HTML.

const input = document.querySelector('#myInput');
const areaCovered = document.querySelector('#areaCovered');
const areaNotCovered = document.querySelector('#areaNotCovered');
const searchResult = document.querySelector('#searchResult');
const fillArea = document.querySelector('#fillArea');
const cities = ["Banda Aceh", "Bandar Lampung", "Banyuwangi", "Bandung", "Bali", "Batam", "Batu", "Bekasi", "Bengkulu", "Binjai", "Blitar", "Bogor", "Bukittinggi", "Cimahi", "Cirebon", "Denpasar", "Depok", "Dumai", "Gunungsitoli", "Jakarta", "Jambi", "Kediri", "Langsa", "Lhokseumawe", "Lombok", "Lubuklinggau", "Madiun", "Magelang", "Malang", "Medan", "Metro", "Mojokerto", "Padang", "Padang Sidempuan", "Padangpanjang", "Pagar Alam", "Palembang", "Pangkal Pinang", "Pariaman", "Pasuruan", "Payakumbuh", "Pekalongan", "Pekanbaru", "Pematangsiantar", "Prabumulih", "Prigi", "Probolinggo", "Sabang", "Salatiga", "Sawahlunto", "Semarang", "Serang", "Sibolga", "Solo", "Subussalam", "Sukabumi", "Sumbawa", "Sungaipenuh", "Surabaya", "Surakarta", "Tangerang", "Tangerang Selatan", "Tanjungbalai", "Tanjungpinang", "Tasikmalaya", "Tebing Tinggi", "Tegal", "Yogyakarta"];

document.querySelector('#search-from').addEventListener('submit', e => {
  e.preventDefault();
  const searchTerm = input.value.trim().toLowerCase();

  fillArea.style.display = 'none';
  areaCovered.style.display = 'none';
  areaNotCovered.style.display = 'none';
  
  if (!searchTerm) {
    fillArea.style.display = 'block';
    return;
  }

  let matches = cities.filter(city => city.toLowerCase() == searchTerm);
  if (matches.length) {
    areaCovered.style.display = 'block';
  } else {
    areaNotCovered.style.display = 'block';
  }
});

.HeadlineSearchContainer {
  position: relative;
  top: 100px;
  margin: auto;
  height: 159px;
}

.SearchCharacterStyle {
  font-family: Roboto;
  font-size: 12px;
  line-height: 24.82px;
  text-align: left;
}

.searchrespond {
  font-family: Roboto;
  font-size: 12px;
  line-height: 24.82px;
  text-align: left;
}

#areaCovered {
  display: none;
}

#areaNotCovered {
  display: none;
}

#fillArea {
  display: none;
}

.autocomplete {
  width: 300px;
}

<div >
  <div >
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" >
    <form autocomplete="off" name="myForm" id="search-from">
      <div >
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i ></i>
      </div>
      <button type="submit">Search</button>
      <div  id="searchRespond">
        <h2 id="areaCovered">YES! We cover your area destination</h2>
        <h2 id="areaNotCovered">We don't cover your area destination yet</h2>
        <h2 id="fillArea">Please fill your area destination first</h2>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

You can use javascript includes().

<script>
const fruits = ["Banana Aceh", "Orange", "Apple", "Mango"];

let str = "Banana Aceh"; //document.getElementById("myInput").value

if(fruits.some(v => str.includes(v))) {
    console.log("Exists");
} else {
    console.log("Did not Exists");
}
</script>

CodePudding user response：

 function searchRespond() {
let searchTerm = document.getElementById("myInput").value;
if (cities.find(city => city == searchTerm))
{
      document.getElementById("areaCovered").style.display = "block";
    }

    else {
      document.getElementById("areaNotCovered").style.display = "block";
      document.getElementById("searchResult").innerHTML = document.getElementById("myInput").value;
    }
  }
  var cities = ["Banda Aceh", "Bandar Lampung", "Banyuwangi", "Bandung", "Bali", "Batam", "Batu", "Bekasi", "Bengkulu", "Binjai", "Blitar", "Bogor", "Bukittinggi", "Cimahi", "Cirebon", "Denpasar", "Depok", "Dumai", "Gunungsitoli", "Jakarta", "Jambi", "Kediri", "Langsa", "Lhokseumawe", "Lombok", "Lubuklinggau", "Madiun", "Magelang", "Malang", "Medan", "Metro", "Mojokerto", "Padang", "Padang Sidempuan", "Padangpanjang", "Pagar Alam", "Palembang", "Pangkal Pinang", "Pariaman", "Pasuruan", "Payakumbuh", "Pekalongan", "Pekanbaru", "Pematangsiantar", "Prabumulih", "Prigi", "Probolinggo", "Sabang", "Salatiga", "Sawahlunto", "Semarang", "Serang", "Sibolga", "Solo", "Subussalam", "Sukabumi", "Sumbawa", "Sungaipenuh", "Surabaya", "Surakarta", "Tangerang", "Tangerang Selatan", "Tanjungbalai", "Tanjungpinang", "Tasikmalaya", "Tebing Tinggi", "Tegal", "Yogyakarta"];

 .HeadlineSearchContainer {
    position: relative;
    top: 100px;
    margin: auto;
    height: 159px;
  }
  
  .SearchCharacterStyle {
    font-family: Roboto;
    font-size: 12px;
    line-height: 24.82px;
    text-align: left;
  }
  
  .searchrespond {
    font-family: Roboto;
    font-size: 12px;
    line-height: 24.82px;
    text-align: left;
  }
  
  #areaCovered {
    display: none;
  }
  
  #areaNotCovered {
    display: none;
  }
  
  #fillArea {
    display: none;
  }

<div >
  <div >
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" >
    <form autocomplete="off" name="myForm">
      <div  style="width:300px;">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i ></i>
      </div>
      <input type="button" formtarget="_new" onclick="searchRespond()" name="input" value="Search">
      <div  id="searchRespond">
        <h id="areaCovered">YES! We cover your area destination</h>
        <h id="areaNotCovered">We don't cover your area destination yet
          <p id="searchResult"></p>
        </h>
        <h id="fillArea">Please fill your area destination first</h>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

suggest to validate input by making first letter uppercase and rest lowercase to match the array values

with javascript indexOf function

function searchRespond() {
var input = document.getElementById("myInput").value;
var area2search = input.charAt(0).toUpperCase()   input.slice(1).toLowerCase(); /* make fist letter capital and rest lower case to match array */
    if (cities.indexOf(area2search) > -1) {
     document.getElementById("areaCovered").style.display = "block";
    //In the array!
} else {
      document.getElementById("areaNotCovered").style.display = "block";
      document.getElementById("searchResult").innerHTML = document.getElementById("myInput").value;
   
}
  }
  var cities = ["Banda Aceh", "Bandar Lampung", "Banyuwangi", "Bandung", "Bali", "Batam", "Batu", "Bekasi", "Bengkulu", "Binjai", "Blitar", "Bogor", "Bukittinggi", "Cimahi", "Cirebon", "Denpasar", "Depok", "Dumai", "Gunungsitoli", "Jakarta", "Jambi", "Kediri", "Langsa", "Lhokseumawe", "Lombok", "Lubuklinggau", "Madiun", "Magelang", "Malang", "Medan", "Metro", "Mojokerto", "Padang", "Padang Sidempuan", "Padangpanjang", "Pagar Alam", "Palembang", "Pangkal Pinang", "Pariaman", "Pasuruan", "Payakumbuh", "Pekalongan", "Pekanbaru", "Pematangsiantar", "Prabumulih", "Prigi", "Probolinggo", "Sabang", "Salatiga", "Sawahlunto", "Semarang", "Serang", "Sibolga", "Solo", "Subussalam", "Sukabumi", "Sumbawa", "Sungaipenuh", "Surabaya", "Surakarta", "Tangerang", "Tangerang Selatan", "Tanjungbalai", "Tanjungpinang", "Tasikmalaya", "Tebing Tinggi", "Tegal", "Yogyakarta"];