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>