Develop Reference

Rails with MaterializeCSS generates "input" in addition to "select", makes dynamic loading impossible

I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS
I'm using javascript to dynamically populate a select dropdown, as shown here.
The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
<option value="age_group">age_group</option>
<option value="gender">gender</option>
<option value="current_country">current_country</option>
<option value="home_country">home_country</option>
<option value="first_language">first_language</option>
</select>
As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.
Is there any way to solve this issue, other than having to also modify the "ul" content?

It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:
https://materializecss.com/select.html
I can just override that behaviour by assigning 'browser-default' class to the select tag:
select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(#crit_types)
This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.

Dropdown List is not Updating the Selected Value (SemanticUI)

I am using SemanticUI for a dropdown list
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
in the bottom of my page, I am initializing it as
jQuery(document).ready(function($) {
$('.ui.dropdown')
.dropdown()
;
});
The problem is that when a user selects an item, it does not update and it keeps showing the default value as selected.
But when I go to Chrome Console and execute the above code JQuery(document)..., then it works fine.
I am assuming it is due to that the initialization needs to execute after page loads completely. So, What I did is the following instead of the above:
window.addEventListener("load", function(){
jQuery(document).ready(function($) {
$('.ui.dropdown')
.dropdown()
;
});
});;
It worked. Dropdown list updates selection immediatly. However, when I click on Submit, I and page reloads, the selection is lost.
The drop down is being used as a filter to table. Having the selection gets lost on submit, makes filter unusable.
What is the best way to go around this.

Use AJAX to submit the form so the page doesn't refresh.

<select>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
no extra js, css required,
edit: autocomplete attribute is not required because it is the default

Insert Input text in a Select as option

I'm doing a list, and the user can filter it with a input text. Now, the field is separated from the select, and I would set the input as an option, like in this image
This is my CODE. Thank you very much!
<div class="row">
<div class="col-md-2">
Search: <input ng-model="query">
</div>
<div class="col-md-10">
<!--Body content-->
<select class="phones">
<option ng-repeat="phone in phones.data | filter:query">
<span>{{phone.name}}</span>
<span>{{phone.age}}</span>
</option>
</select>
</div>
</div>

It is a somewhat complex task, I recommend you use an existing component/library unless your requirements are very, very special.
I can recommend Chosen, which will help you create dropdown menus with filtering through textbox:
https://github.com/harvesthq/chosen
Regarding your requirement from the comments, the need to search not only from the beginning of a word, there is an option in Chosen to achieve that - it's called "search_contains". Refer to Chosen documentation for details:
http://harvesthq.github.io/chosen/options.html
Also see this StackOverflow question regarding "search_contains":
Changing search behavior in jquery plugin Chosen

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?

Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

Selecting an option using fancy select

I've got a fancy select with code similar to the following, yet adding the selected=selected attribute to one of the options (with JS) does not change which item is currently selected.
<li class="field">
<div class="picker">
<select>
<option value="#" disabled>Favorite Doctor…</option>
<option>Colin Baker</option>
<option>Sylvester McCoy</option>
<option>Paul McGann</option>
<option>Christopher Eccleston</option>
<option>David Tennant</option>
<option>Matt Smith</option>
</select>
</div>
</li>
How can I change the selected option and have this change reflected in the select box.

Try to trigger the change event after you set the selected option, for example:
$('option:eq(2)').prop('selected',true).trigger('change'); // or .change()
Fiddle Demo

Solved it by setting the select.val() to the text of the option I'm trying to select.

I solved it by mending FS's code. It was using :selected as a selector. Changed it to [selected="selected"] and it behaved. Best to just avoid FS completely though, in my opinion. I inherited it on a project I'm working on.
Around line 56 in my copy, now changed to:
triggerHtml = settings.triggerTemplate(sel.find('[selected="selected"]'));