Is there alternative for datalist?

Question

datalist {
  color: red;
  height: 10px;
}

<input list="langs">
<datalist id="langs">
  <option value="Javascript">
  <option value="PHP">
  <option value="C#">
  <option value="C++">
  <option value="C">
  <option value="Python">
  <option value="Java">
  <option value="Ruby">
  <option value="Kotlin">
  <option value="Delphi">
  <option value="Go">
  <option value="Perl">
  <option value="ObjectiveC">
</datalist>

I want to use datalist but list is being too extended with datas , i cant make it short.Because CSS does not affect it.Do you have any alternative advice for datalist? I dont prefer use select because i want that users can be enter input and i want to make like search text , datalist is suitable for this.But in select you have to just select option without text.

Answer 1

I was also stucked in styling the datalist and after some research I am here with this code where I applied my custom css to datalist.

    var count = 1;
    var group = document.getElementById('slg');
    var list_group = group.querySelector('li ul');
    var list_array = group.querySelectorAll('li ul li');
    var search = group.getElementsByTagName('input')[0];
    
    search.addEventListener('input', function (e) {
      for (var i = 0; i < list_array.length; i++) { matching(list_array[i]) }
      show_list(list_group);
      key_up_down();
    });
    
    search.addEventListener('click', function (e) {
      init_list();
      show_list(list_group);
      key_up_down();
    });
    
    search.addEventListener('keypress', function (e) {
      if (e.keyCode == 13) { e.target.value = list_group.querySelector('[data-highlight="true"]').innerHTML }
      hide_list(list_group)
      init_list();
    });
    
    function matching(item) {
      var str = new RegExp(search.value, 'gi');
      if (item.innerHTML.match(str)) { item.dataset.display = 'true'} 
      else { item.dataset.display = 'false'; item.dataset.highlight = 'false'; count = 0 }
    }
    
    function init_list() {
      count = 0;
      for (var i = 0; i < list_array.length; i++) { init_item(list_array[i]); list_array[i].addEventListener('click', copy_paste); }
    }
    
    function init_item(item) { item.dataset.display = 'true'; item.dataset.highlight = 'false'; }
    
    function copy_paste() { search.value = this.innerHTML;
      // todo : check match of list text and input value for .current 
      init_list(); hide_list(list_group);
    }
    
    function hide_list(ele) { ele.dataset.toggle = 'false' }
    
    function show_list(ele) { ele.dataset.toggle = 'true' }
    
    function key_up_down() {
      var items = group.querySelectorAll('li[data-display="true"]');
      var last = items[items.length - 1];
      var first = items[0];
    
      search.onkeydown = function (e) {
        
        if (e.keyCode === 38) {
          count--;
          count = count <= 0 ? items.length : count;
          items[count - 1].dataset.highlight = items[count - 1] ? 'true' : 'false';
          if (items[count]) { items[count].dataset.highlight = 'false'; }
          else { first.dataset.highlight = 'false'; }
        } 
        
        if (e.keyCode === 40) {
          items[count].dataset.highlight = items[count] ? 'true' : 'false';
          if (items[count - 1]) { items[count - 1].dataset.highlight = 'false'; }
          else { last.dataset.highlight = 'false'; }
          count++;
          count = count >= items.length ? 0 : count;
        }
      };
    }
    
    group.addEventListener('mouseleave', function(event){
      if (event.target != list_group && event.target.parentNode != list_group){ list_group.dataset.toggle = 'false' }
    });

* {box-sizing: border-box;}
    body {padding: 10%;}
    input, li {padding: 0.6rem 1rem; margin: 0;}
    li {position: relative;}
    ul {list-style: none; padding: 0;}
    li li:hover {color: white; background-color: grey;}
    li li.current {color: white;background-color: pink;}
    #universe {width: 240px;}
    .select-list-group, .select-list-group * {width: 100%;}
    .select-list-group .select-list-group__search + .select-list-group__toggle:after {
      content: "v";
      font-family: sans-serif;
      position: absolute;
      top: 0.6rem;
      right: 0.7rem;
      width: 2rem;
      padding: 0.6rem;
      text-align: center;
    }
    .select-list-group .select-list-group__search:focus + .select-list-group__toggle:after {content: "^";}
    .select-list-group [data-toggle=false] {display: none;}
    .select-list-group [data-toggle=true] {display: inherit;box-shadow: 0 3px 7px -2px rgba(0, 0, 0, 0.2);}
    .select-list-group li[data-display=false] {display: none;}
    .select-list-group li[data-display=true] {display: inherit;}
    .select-list-group li[data-highlight=false] {border-left: 5px solid transparent;}
    .select-list-group li[data-highlight=true] {border-left: 5px solid darkslateblue;}

<div id="universe">
      <ul class="select-list-group" id="slg">
        <li>
          <input type="text" class="select-list-group__search" placeholder="Choose month or type"/>
          <span class="select-list-group__toggle"> </span>
          <ul class="select-list-group__list" data-toggle="false">
            <li class="select-list-group__list-item" data-display="true" data-highlight="false">January 2021</li>
            <li class="select-list-group__list-item" data-display="true" data-highlight="false">February 2021</li>
            <li class="select-list-group__list-item" data-display="true" data-highlight="false">March 2021</li>
            <li class="select-list-group__list-item" data-display="true" data-highlight="false">April 2021</li>
          </ul>
        </li>
      </ul>
    </div>