Плагин jQuery для Select по типу datalist?

169
04 декабря 2017, 16:08

Стандартные, такие как Chosen или Select2 не подходят, т.к. не позволяют ввести данные, которых нет в списке.

Мне нужен Input, который во время ввода текста делает подсказки по подготовленному списку. По клику на Input должен выпадать список.

Может как-то модицифировать Chosen или Select2 ? Чтобы если нет совпадения, текст не стирался.

Или как стилизировать стандартный выпадающий список datalist? Но использование datalist нежелательно, т.к. не всеми браузерами он поддерживается.

Answer 1

var data = ["lol", "kek", "cheburek"]; 
console.clear(); 
 
$("#inp").on("keyup", function() { 
	var m = $("#m"); 
        m.html(""); 
	inp = $("#inp").val(); 
	data.forEach(function(child) { 
  	   if(child.indexOf(inp)!==-1) { 
               m.append(child + "<br>") 
           } 
        }); 
}); 
 
$("#inp").focus(function() { 
  var m = $("#m"); 
  m.html(""); 
  data.forEach(function(child) { 
    if(child.indexOf(inp)!==-1) { 
    	m.append(child + "<br>") 
    } 
  }); 
}); 
 
$("#inp").focusout(function() { 
  var m = $("#m"); 
  m.html(""); 
});
#m { 
  background-color: #1C90F3; 
  width: 25%; 
  border-radius: 2px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="inp" autocomplete="off"> 
<div id="m"></div>

READ ALSO
Проверка на пустоту блока

Проверка на пустоту блока

Можно ли проверить на пустоту блока "blog", если он пустой то мы добавляем таблицу, а если в нем уже есть название и хотя бы одна ячейка, то мы к тому...

234
Spannable и Html не работают совместно

Spannable и Html не работают совместно

Использую spannable для реализации сносок в приложении:

279
Отступ после футера

Отступ после футера

Перерыл уже весь гугл, как только не пытался баловаться со стилями

254