Create dropdown with div and select2

Issue

I want to create in my table a column with the possibility of assigning the task in the same way as in this image:

enter image description here

Can you help do something like that?

What I’ve been doing:

var linha = ``; 

linha += `<tr id="5">
             <td class="text-center text-muted" style="vertical-align: middle;"><div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
      <input class="select2-search form-control form-control-sm" type="text" placeholder="search..."/>
      <div class="item">Option 1</div>
      <div class="item">Option 2</div>
    </div></div><div class="tooltip">Atribuir Membro</div></div></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

$(function() {
  
  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
  });
  
  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
  });
  
  $(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
  $(document).on('click', function(evt) {
    if ( $(evt.target).closest(".dropdown > .caption").length === 0 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
});
.tooltip-demo {
    position: relative;
}

.tooltip {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .1s;
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: #333;
    color: #eee;
    padding: .25rem .75rem;
    white-space: nowrap;
    border-radius: 3.5px;
}

.most:hover ~ .tooltip,
.most:focus ~ .tooltip,
.most.active ~ .tooltip {
  opacity: 1;
  visibility: visible;
}

div.dropdown {
  position: relative;
}

div.dropdown > div.caption {
  padding: 11px 40px;
  border-radius: 3px;
  cursor: pointer;
}

div.dropdown > div.list {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  border-radius: 0 0 3px 3px;
  display: none;
  margin-top: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

div.dropdown > div.list > div.item {
  padding: 11px 14px;
  cursor: pointer;
}

div.dropdown > div.list > div.item.selected {
  font-weight: bold;
}

div.dropdown > div.caption:hover,
div.dropdown > div.list > div.item:hover {
  color: #29a4f6;
}

div.dropdown.open > div.caption {
  border-radius: 3px 3px 0 0;
}

div.dropdown.open > div.list {
  display: block;
}

.select2 {
  position: relative;
}
.select2-list {
    display: none;
    position: absolute;
    max-height: 300px;
    overflow: overlay;
}
.select2-item:hover{
    background-color: #94adff31;
    cursor: default;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
  <thead>
      <tr>
        <th class="text-center col-2">Destinatário</th>
      </tr>
  </thead>
  <tbody>

  </tbody>
</table>

This is the code I’m trying to create something like the image above. But in this code, when I click the search field the ocins window closes, it doesn’t work properly.

Solution

Try the below code! By doing as follow, you can keep your window open even when you click n the search field but when you click outside of the tr which’s id is 5, then it will close the window.

var linha = ``; 

linha += `<tr id="5">
             <td class="text-center text-muted" style="vertical-align: middle;"><div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
      <input class="select2-search form-control form-control-sm" type="text" placeholder="search..."/>
      <div class="item">Option 1</div>
      <div class="item">Option 2</div>
    </div></div><div class="tooltip">Atribuir Membro</div></div></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

$(function() {
  
  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
  });
  
  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
  });
  
  $(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
});


var ignoreClickOnMeElement = document.getElementById('5');

document.addEventListener('click', function(event) {
  var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
  if (!isClickInsideElement) {
    $('.dropdown').removeClass('open');
  }
});
.tooltip-demo {
    position: relative;
}

.tooltip {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .1s;
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: #333;
    color: #eee;
    padding: .25rem .75rem;
    white-space: nowrap;
    border-radius: 3.5px;
}

.most:hover ~ .tooltip,
.most:focus ~ .tooltip,
.most.active ~ .tooltip {
  opacity: 1;
  visibility: visible;
}

div.dropdown {
  position: relative;
}

div.dropdown > div.caption {
  padding: 11px 40px;
  border-radius: 3px;
  cursor: pointer;
}

div.dropdown > div.list {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  border-radius: 0 0 3px 3px;
  display: none;
  margin-top: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

div.dropdown > div.list > div.item {
  padding: 11px 14px;
  cursor: pointer;
}

div.dropdown > div.list > div.item.selected {
  font-weight: bold;
}

div.dropdown > div.caption:hover,
div.dropdown > div.list > div.item:hover {
  color: #29a4f6;
}

div.dropdown.open > div.caption {
  border-radius: 3px 3px 0 0;
}

div.dropdown.open > div.list {
  display: block;
}

.select2 {
  position: relative;
}
.select2-list {
    display: none;
    position: absolute;
    max-height: 300px;
    overflow: overlay;
}
.select2-item:hover{
    background-color: #94adff31;
    cursor: default;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
  <thead>
      <tr>
        <th class="text-center col-2">Destinatário</th>
      </tr>
  </thead>
  <tbody>

  </tbody>
</table>

If you want to get the functionality of your search field, the below link will help you.

How TO – Filter/Search List

Thanks and best regards!

Answered By – Vishal Kalansooriya

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.