CODEWITHSUNDEEP
javascripthtmluser-inputmatching
Escade
Escade

Reputation: 31

How to match user input with array data in JavaScript

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 prepared, when the search result match the script will change the display style of element into showing the result of their search value, but until now the result always showing false value.

Is there any better way to do this? Is there something wrong with my code?

 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 class="HeadlineSearchContainer">
  <div class="SearchCharacterStyle">
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" class="searchbox_box">
    <form autocomplete="off" name="myForm">
      <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i class="searchbutton"></i>
      </div>
      <input type="button" formtarget="_new" onclick="searchRespond()" name="input" value="Search">
      <div class="searchrespond" 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>

Upvotes: 2

Views: 783

Answers (4)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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 class="HeadlineSearchContainer">
  <div class="SearchCharacterStyle">
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" class="searchbox_box">
    <form autocomplete="off" name="myForm" id="search-from">
      <div class="autocomplete">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i class="searchbutton"></i>
      </div>
      <button type="submit">Search</button>
      <div class="searchrespond" 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>

Upvotes: 2

benkov
benkov

Reputation: 194

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"];

Upvotes: -1

Neophile
Neophile

Reputation: 1519

 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 class="HeadlineSearchContainer">
  <div class="SearchCharacterStyle">
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" class="searchbox_box">
    <form autocomplete="off" name="myForm">
      <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i class="searchbutton"></i>
      </div>
      <input type="button" formtarget="_new" onclick="searchRespond()" name="input" value="Search">
      <div class="searchrespond" 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>

Upvotes: 0

Benjoe Carandang
Benjoe Carandang

Reputation: 77

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>

Upvotes: 1

Related Questions