CODEWITHSUNDEEP
javascripthtmlcss
Ibnul Alam
Ibnul Alam

Reputation: 79

Everytime a user clicks an item form the dropdown list read the value of it and put it in an input field

Please visit the page to see the problem https://ibnul.neocities.org/_temporary/index10-prb2.html

Here I have an input field when you click on it it will show a drop-down list with some list items. If a user clicks on an item form the list it should show in the input field. And if a user clicks another item form the list again it should show in the input field again overriding the previous one. Almost like a select option tag behavior.

I mean the text value of that item which the user clicks should show in the input field and the list will disappear.

Can anyone show me how to write this script please. Please show it in pure javascript.

var zip_list_show_Btn = document.querySelector('.ziplist-show-btn');
var zip_list_con = document.querySelector('.zip-list-con');

zip_list_show_Btn.addEventListener('focus', showZiplistCon);

function showZiplistCon() {
  zip_list_con.classList.add('show-zip-list-con');
}

window.addEventListener("click", function(event) {
  if (!event.target.matches('.ziplist-show-btn')) {
    var langDropdowns = document.getElementsByClassName('zip-list-con');
    for (var i = 0; i < langDropdowns.length; i++) {
      var openlangDropdown = langDropdowns[i];
      if (openlangDropdown.classList.contains('show-zip-list-con')) {
        openlangDropdown.classList.remove('show-zip-list-con');
      }
    }
  }
});
* {
  margin: 0px;
}

body {
  padding: 50px;
  display: flex;
  justify-content: center;
}

.zip-input {
  width: 100px;
  padding: 10px 5px 10px 5px;
  margin: 5px 10px 5px 10px;
  font-size: 14px;
  border: 1px solid rgb(179, 179, 179);
  color: rgb(172, 172, 172);
  -webkit-appearance: none;
}

.zip-input::placeholder {
  color: #acacac;
  opacity: 1;
}

.zip-input-ziplist-con {
  position: relative;
  display: flex;
}

.zip-list-con {
  flex-grow: 2;
  position: absolute;
  z-index: 1;
  top: 53px;
  right: 0px;
  width: 160px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  border: 0.9px solid lightgray;
  display: none;
}

.zip-listitem {
  cursor: default;
  padding: 5px 5px 5px 10px;
  font-size: 14px;
  color: #acacac;
}

.zip-listitem:hover {
  background-color: #228de4;
  color: white;
}

.show-zip-list-con {
  display: block;
}
<div class='zip-input-ziplist-con'>
  <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>
  <div class='zip-list-con'>
    <p class='zip-listitem'>43748 NewYork</p>
    <p class='zip-listitem'>43748 Italy</p>
    <p class='zip-listitem'>43748 French</p>
    <p class='zip-listitem'>43748 Australia</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
  </div>
</div>

Upvotes: 1

Views: 89

Answers (4)

Teocci
Teocci

Reputation: 8955

I think you are trying to use vanilla JavaScript so you have 2 options: when you close the dropdown list get the element clicked or add a listener to each of your zip items to trigger a verification.

First option:

You verify if the element triggered was a element with a .zip-listitem class and close the dropdown.

const zip_list_show_Btn = document.querySelector('.ziplist-show-btn');
const zip_list_con = document.querySelector('.zip-list-con');

zip_list_show_Btn.addEventListener('focus', showZiplistCon);

function showZiplistCon() {
  zip_list_con.classList.add('show-zip-list-con');
}

window.addEventListener('click', function(event) {
  if (!event.target.matches('.ziplist-show-btn')) {
    var langDropdowns = document.getElementsByClassName('zip-list-con');

    for (i = 0; i < langDropdowns.length; i++) {
      var openlangDropdown = langDropdowns[i];
      if (openlangDropdown.classList.contains('show-zip-list-con')) {
        // Verify that was triggered from an item
        if (event.target.matches('.zip-listitem')) {
          // Assaign the text
          zip_list_show_Btn.value = event.target.innerHTML;
        }

        // Close the dropdown
        openlangDropdown.classList.remove('show-zip-list-con');
      }
    }
  }
});
* {
  margin: 0px;
}

body {
  padding: 50px;
  display: flex;
  justify-content: center;
}

.zip-input {
  width: 100px;
  padding: 10px 5px 10px 5px;
  margin: 5px 10px 5px 10px;
  font-size: 14px;
  border: 1px solid rgb(179, 179, 179);
  color: rgb(172, 172, 172);
  -webkit-appearance: none;
}

.zip-input::placeholder {
  color: #acacac;
  opacity: 1;
}

.zip-input-ziplist-con {
  position: relative;
  display: flex;
}

.zip-list-con {
  flex-grow: 2;
  position: absolute;
  z-index: 1;
  top: 53px;
  right: 0px;
  width: 160px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  border: 0.9px solid lightgray;
  display: none;
}

.zip-listitem {
  cursor: default;
  padding: 5px 5px 5px 10px;
  font-size: 14px;
  color: #acacac;
}

.zip-listitem:hover {
  background-color: #228de4;
  color: white;
}

.show-zip-list-con {
  display: block;
}
<div class='zip-input-ziplist-con'>
  <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>
  <div class='zip-list-con'>
    <p class='zip-listitem'>43748 NewYork</p>
    <p class='zip-listitem'>43748 Italy</p>
    <p class='zip-listitem'>43748 French</p>
    <p class='zip-listitem'>43748 Australia</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
  </div>
</div>

You also can optimize it by removing the window and replacing it with the zip_list_con element like this:

const zip_list_show_Btn = document.querySelector('.ziplist-show-btn');
const zip_list_con = document.querySelector('.zip-list-con');

zip_list_show_Btn.addEventListener('focus', showZiplistCon);

function showZiplistCon() {
  zip_list_con.classList.add('show-zip-list-con');
}

zip_list_con.addEventListener('click', function(event) {
  if (!event.target.matches('.ziplist-show-btn')) {
    if (zip_list_con.classList.contains('show-zip-list-con')) {
      // Verify that was triggered from an item
      if (event.target.matches('.zip-listitem')) {
        // Assaign the text
        zip_list_show_Btn.value = event.target.innerHTML;
      }

      // Close the dropdown
      zip_list_con.classList.remove('show-zip-list-con');
    }
  }
});
* {
  margin: 0px;
}

body {
  padding: 50px;
  display: flex;
  justify-content: center;
}

.zip-input {
  width: 100px;
  padding: 10px 5px 10px 5px;
  margin: 5px 10px 5px 10px;
  font-size: 14px;
  border: 1px solid rgb(179, 179, 179);
  color: rgb(172, 172, 172);
  -webkit-appearance: none;
}

.zip-input::placeholder {
  color: #acacac;
  opacity: 1;
}

.zip-input-ziplist-con {
  position: relative;
  display: flex;
}

.zip-list-con {
  flex-grow: 2;
  position: absolute;
  z-index: 1;
  top: 53px;
  right: 0px;
  width: 160px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  border: 0.9px solid lightgray;
  display: none;
}

.zip-listitem {
  cursor: default;
  padding: 5px 5px 5px 10px;
  font-size: 14px;
  color: #acacac;
}

.zip-listitem:hover {
  background-color: #228de4;
  color: white;
}

.show-zip-list-con {
  display: block;
}
<div class='zip-input-ziplist-con'>
  <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>
  <div class='zip-list-con'>
    <p class='zip-listitem'>43748 NewYork</p>
    <p class='zip-listitem'>43748 Italy</p>
    <p class='zip-listitem'>43748 French</p>
    <p class='zip-listitem'>43748 Australia</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
  </div>
</div>

Second option:

You define the list of items and add a listener to each of them. Then verified that the dropdown was called, get the value of the selected zip item with innerHTML and remove the class that show the drowdown.

Also, you remove the window element listener because the verification will be done by the listener of each item.

const zip_list_show_Btn = document.querySelector('.ziplist-show-btn');
const zip_list_con = document.querySelector('.zip-list-con');

const items = document.querySelectorAll('.zip-listitem');

for (i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function(event) {
    // Assign the value
    zip_list_show_Btn.value = event.target.innerHTML;
    let itemParent = event.target.parentElement;
    // Close the dropdown
    if (itemParent.classList.contains('show-zip-list-con')) {
      itemParent.classList.remove('show-zip-list-con');
    }
  });
}

zip_list_show_Btn.addEventListener('focus', showZiplistCon);

function showZiplistCon() {
  zip_list_con.classList.add('show-zip-list-con');
}
* {
  margin: 0px;
}

body {
  padding: 50px;
  display: flex;
  justify-content: center;
}

.zip-input {
  width: 100px;
  padding: 10px 5px 10px 5px;
  margin: 5px 10px 5px 10px;
  font-size: 14px;
  border: 1px solid rgb(179, 179, 179);
  color: rgb(172, 172, 172);
  -webkit-appearance: none;
}

.zip-input::placeholder {
  color: #acacac;
  opacity: 1;
}

.zip-input-ziplist-con {
  position: relative;
  display: flex;
}

.zip-list-con {
  flex-grow: 2;
  position: absolute;
  z-index: 1;
  top: 53px;
  right: 0px;
  width: 160px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  border: 0.9px solid lightgray;
  display: none;
}

.zip-listitem {
  cursor: default;
  padding: 5px 5px 5px 10px;
  font-size: 14px;
  color: #acacac;
}

.zip-listitem:hover {
  background-color: #228de4;
  color: white;
}

.show-zip-list-con {
  display: block;
}
<div class='zip-input-ziplist-con'>
  <input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>
  <div class='zip-list-con'>
    <p class='zip-listitem'>43748 NewYork</p>
    <p class='zip-listitem'>43748 Italy</p>
    <p class='zip-listitem'>43748 French</p>
    <p class='zip-listitem'>43748 Australia</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
  </div>
</div>

Upvotes: 3

Jenuel Ganawed
Jenuel Ganawed

Reputation: 384

OPTION 1
By using jquery

$('.zip-listitem').on('click',function (){
$('input').text($(this).text())
})

OPTION 2
using pure js but first add an id for the input (Or you can use class name instead)

<input id="zip-input" class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>

and then add this code inside your click event listenstner

window.addEventListener("click", function(event) {

  ...

  if (event.target.matches('.zip-listitem')) {
      document.getElementById('zip-input').value = event.target.textContent+'';
  }

});


var zip_list_show_Btn = document.querySelector('.ziplist-show-btn');
var zip_list_con = document.querySelector('.zip-list-con');

zip_list_show_Btn.addEventListener('focus', showZiplistCon);

function showZiplistCon() {
  zip_list_con.classList.add('show-zip-list-con');
}

window.addEventListener("click", function(event) {
  if (!event.target.matches('.ziplist-show-btn')) {
    var langDropdowns = document.getElementsByClassName('zip-list-con');
    for (var i = 0; i < langDropdowns.length; i++) {
      var openlangDropdown = langDropdowns[i];
      if (openlangDropdown.classList.contains('show-zip-list-con')) {
        openlangDropdown.classList.remove('show-zip-list-con');
      }
    }
  }
  
  if (event.target.matches('.zip-listitem')) {
      document.getElementById('zip-input').value = event.target.textContent+'';
      console.log(event.target.textContent);
  }
  
});
* {
  margin: 0px;
}

body {
  padding: 50px;
  display: flex;
  justify-content: center;
}

.zip-input {
  width: 100px;
  padding: 10px 5px 10px 5px;
  margin: 5px 10px 5px 10px;
  font-size: 14px;
  border: 1px solid rgb(179, 179, 179);
  color: rgb(172, 172, 172);
  -webkit-appearance: none;
}

.zip-input::placeholder {
  color: #acacac;
  opacity: 1;
}

.zip-input-ziplist-con {
  position: relative;
  display: flex;
}

.zip-list-con {
  flex-grow: 2;
  position: absolute;
  z-index: 1;
  top: 53px;
  right: 0px;
  width: 160px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  border: 0.9px solid lightgray;
  display: none;
}

.zip-listitem {
  cursor: default;
  padding: 5px 5px 5px 10px;
  font-size: 14px;
  color: #acacac;
}

.zip-listitem:hover {
  background-color: #228de4;
  color: white;
}

.show-zip-list-con {
  display: block;
}
<div class='zip-input-ziplist-con'>
  <input id="zip-input" class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>
  <div class='zip-list-con'>
    <p class='zip-listitem'>43748 NewYork</p>
    <p class='zip-listitem'>43748 Italy</p>
    <p class='zip-listitem'>43748 French</p>
    <p class='zip-listitem'>43748 Australia</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
    <p class='zip-listitem'>43748 something</p>
  </div>
</div>

Upvotes: 1

L-Tan
L-Tan

Reputation: 121

Following the way you are writing the code, the goal is to get the text that is clicked and put that value in your input element. So, just add this block in your eventListener callback function.

if (event.target.matches('.zip-listitem')) {
    var selectedText = event.target.textContent;
    document.getElementsByClassName("zip-input")[0].value = selectedText;
}

Upvotes: 4

Mhd Wael Jazmati
Mhd Wael Jazmati

Reputation: 677

Please include jQuery and run this code $('.zip-listitem').on('click',function (){ $('input').text($(this).text()) })

Upvotes: 3

Related Questions