Biorąc pod uwagę, że znacznik datalist HTML nadal nie jest w pełni obsługiwany, alternatywnym podejściem, którego użyłem, jest Dojo Toolkit ComboBox . Było łatwiejsze do wdrożenia i lepiej udokumentowane niż inne opcje, które badałem. Dobrze współpracuje również z istniejącymi frameworkami. W moim przypadku dodałem ten zestaw do istniejącej witryny internetowej opartej na Codeigniter i Bootstrap bez żadnych problemów. Wystarczy upewnić się, że zastosowałeś motyw Dojo (np. Class = "claro") do elementu nadrzędnego combo zamiast tagu body aby uniknąć konfliktów stylizacji.
Najpierw dołącz CSS dla jednego z motywów Dojo (np. „Claro”). Ważne jest, aby plik CSS był dołączony przed poniższymi plikami JS.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />
Następnie dołącz jQuery i Dojo Toolkit przez CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
Następnie możesz po prostu śledzić za przykładowym kodem Dojo lub skorzystać z przykładu poniżej, aby uzyskać działający combobox.
<body>
<div class="claro"><input id="item_name_1" class=""/></div>
<script type="text/javascript">
$(document).ready(function () {
dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];
require(
[ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"],
function (Memory, ComboBox) {
var stateStore = new Memory({
data: dataStore
});
var combo = new ComboBox({
id: "item_name_1",
name: "desc_1",
store: stateStore,
searchAttr: "name"},
"item_name_1"
).startup();
});
});
</script>
</body>
<select>
element nie może tego zrobić.