Topic: javascript interaction (onclick) with searchable material select
This is more of a general "how to" question and doesn't necessarily require much in the way of code. Let's take the standard seach/select from the documentation:
<select class="mdb-select md-form" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
</select>
When you instantiate this in the browser, you get a WHOLE LOT of stuff:
<div class="select-wrapper mdb-select md-form"><span class="caret">▼</span>
<input type="text" class="select-dropdown form-control active" readonly="true" required="false" data-activates="select-options-fdda6753-5bec-4708-b029-5192092d514a" value="">
<ul id="select-options-fdda6753-5bec-4708-b029-5192092d514a" class="dropdown-content select-dropdown w-100 active" style="width: 539.156px; position: absolute; top: 0px; left: 0px; opacity: 1; display: block;"><span class="search-wrap ml-2"><div class="md-form mt-0"><input type="text" class="search w-100 d-block" tabindex="-1" placeholder="Search here.."></div></span>
<li class="disabled "><span class="filtrable"> Choose your country </span></li>
<li class=" "><span class="filtrable"> USA </span></li>
<li class=" "><span class="filtrable"> Germany </span></li>
<li class=" "><span class="filtrable"> France </span></li>
<li class=" "><span class="filtrable"> Poland </span></li>
<li class=" "><span class="filtrable"> Japan </span></li>
</ul>
<select class="mdb-select md-form initialized" searchable="Search here..">
<option value="" disabled="" selected="">Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
</select>
</div>
What I am trying to do is the following, which should be pretty simple:
When someone selects an option (eg: onclick), I want to capture the value of the selected option and then do something with it, and then close the select without showing anything being selected. The javascript that handles the option being onclicked would do all the work that I want. I'm essentially trying to implement an autocompleting search box across pre-existing items within the browser (as opposed to doing AJAX queries to the back-end -- the list of items is relatively small).
I hope this makes sense. It's clear that one of the li/span elements would be what gets clicked but I'm not sure how to capture its value since the spans are not actual options. I'm assuming it will have something to do with the data-activates or something like it. Searching the forum for select and click or onclick didn't yield any results.
Thanks!
Hi erik.mjacobs,
I created a snippet with an example for you:
https://mdbootstrap.com/snippets/jquery/pjoter-2-0/967333
If you need additional help I am here for you.
Best Regards, Piotr
erikmjacobs commented 5 years ago
Maybe a dumb question but I noticed that I don't have .materialSelect(); in my personal code but the select seems to work/look just fine. What does it actually do in the background?
erikmjacobs commented 5 years ago
Also I noticed a slight problem with the code. When you set the input val after click it it actually fills the input with active text. When you then re-click into the select it does drop down the options, but if you try to type something to search the javascript-placed text is already there. In other words, the default behavior when you click in is that the text in the input disappears to allow you to type/search. But after "manually" setting the val with javascript when you click in the text in the input no longer disappears.
I did make a tweak which unsets the selected/active classes because we want to continually reuse the dropdown. Without un-setting the selected/active class when you click into the dropdown again you see your previous selection.
MDBootstrap staff pro premium priority commented 5 years ago
1st - select is a default component. It should work without our styling and initialization. Our additional features won't work when you don't implement it but it should still work :)
2nd - You are right. My snippet example did only what you asked for and didn't expect further debugging it. I fixed the snippet: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/967333
erikmjacobs commented 5 years ago
Sorry, still having some issues. I very much appreciate the help.
When you type to search and then select (eg: type Fr for france and then click france), after you click back in it still appears that the search term is somehow stored because only France will show up. If you press backspace once the entire list re-appears.
This seems to be because as you type the filterable action is happening which is setting unmatched items to display: none.
So, it would seem that additionally iterating over the li and span elements and un-setting display: none would partially be required. I'm still trying to figure that out.
re-initializing the select did bad things.
erikmjacobs commented 5 years ago
This appears to do the trick:
https://mdbootstrap.com/snippets/jquery/erikmjacobs/981389
I am not sure this is the best method.
MDBootstrap staff pro premium priority commented 5 years ago
To be honest this is your code and if it does what you try to accomplish then it is ok. It is not hard to compute for your browser and is simple to work with.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.1
- Device: Laptop
- Browser: Chrome
- OS: Linux
- Provided sample code: No
- Provided link: No