acburst on gh-pages
Patreon june (compare)
acburst on gh-pages
Patreon may (compare)
onAutocomplete: function(val){
elems[0].style.backgroundImage = 'url('+instances[0].options.data[document.querySelector('.autocomplete').value]+')';
}
});
onAutocomplete: function(val){
elems[0].style.backgroundImage = 'url('+instances[0].options.data[val]+')';
}
});
Here's a more difficult question:
To create the autocomplete data structure you can do something like this:
data["Fido Tucker"] = "/_AGHR/image_cache/fido.png";
data["James Brown"] = "/_AGHR/image_cache/brownLab.png";
data["Golden Boy"] = "/_AGHR/image_cache/golden.png";
data["Fido Tucker"] = "/_AGHR/image_cache/lab.png";
var options = {
data: data,
minLength: 1,
onAutocomplete: persist_image,
};
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {});
var my_instance = instances[0];
Then, when onAutocomplete fires you get the key that identifies who was selected and you can persist the image
function persist_image(data_key)
{
my_instance.el.style.backgroundImage = "url(" + my_instance.options.data[data_key] + ")";
my_instance.el.style.backgroundRepeat = "no-repeat";
my_instance.el.style.backgroundSize = "40px 40px";
my_instance.el.style.backgroundPosition = "right";
}
Here's the question: Notice that there are 2 "fido tucker"s in the data. Imagine these are two employees in a large company that happen to have the same name. How can you tell, which fido tucker was selected? Is there a way of adding a meta-data field (such as employee ID) to data? Obviously you can concatenate the employee id to the name and get something like "Fido Tucker (id:100345035)" which would be unique, but then the ID shows up in the dropdown and in the final selection - which looks bad. Is there a way to know uniquely, who was selected? Even if you could pull an index from the data in the autocomplete function, that could be made to work (just keep a separate array with index/ID pairs in the same order).
Appreciate any ideas anyone may have.
Hi everyone ! I'm trying to implement a nested Dropdown menu, and found a good example online, but for some reason I'm having a strange behavior :
As an example you can see a live demo here : https://jsfiddle.net/ThibaudMZN/nrqbs0mv/35/
Try commenting / uncommenting the HTML's style tags and see the difference
Any idea why this is happening would be greatly appreciated !
Thanks !
menu
button, or sometimes randomly
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example nested dropdown</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<style>
.container {
background: #eee;
border-radius: 8px;
}
.dropdown-content .dropdown-content {
left: -100%;
}
.dropdown-nested {
overflow-y: visible;
}
.dropdown-nested {
overflow-y: visible;
}
</style>
</head>
<body>
<div class="container">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Menu</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a href="#!">uno</a></li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2'>uno</a></li>
<li><a href="#!">uno</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3">dos</a></li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(function ()
{
$('.dropdown-trigger').dropdown();
$('.sub').dropdown({
hover: true
}
);
});
</script>
</body>
</html>