javascript - Is there alternative for datalist? - Stack Overflow

admin管理员组

文章数量:1287627

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>

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.

• javascript
• html
• css
• html-datalist

Share Improve this question Follow edited Jul 8, 2019 at 13:47 User863 20k33 gold badges1919 silver badges4444 bronze badges asked Jan 16, 2019 at 8:58 ahmetbcakiciahmetbcakici 42377 silver badges1818 bronze badges 3

• use json object which contains your option – Shireesha Parampalli Commented Jan 16, 2019 at 9:00
• 2 These functionalities are decided by browsers. You do not have control over it. If you need to customize the count, display property etc, you should use custom control. Check out ourcodeworld./articles/read/193/… or github./pawelczak/EasyAutoplete these are some of the custom autoplete control for Javascript and jquery. – Prajwal Commented Jan 16, 2019 at 9:07
• 2 Well, CSS-tricks suggests you to use clamp.js - github./josephschmitt/Clamp.js css-tricks - css-tricks./almanac/properties/l/line-clamp – Prajwal Commented Jan 16, 2019 at 9:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签： javascriptIs there alternative for datalistStack Overflow