We Keep Coding

Focus on searchbox input when clicking dropdown menu of bootstrap selectpicker

My problem is simple, but I can't seem to find a solution:
I am using bootstrap selectpicker plugin for my <select> tags
What I want is that when the user clicks on the dropdown selections,
the search box gets focused on, instead of having to click on the search box for it to be focused on to initiate a keyword search (Just better UI in general),
I read online that focusing on the searchbox should be on by default, but I tried default settings and it is not working
Here is my JQUERY/JS attempt to manually focus on the search box textbox input:
I tried this
$('.ingredientsList .dropdown-toggle').on('click', function (e) {
$(this).find(".bs-searchbox input").focus();
});
and this
$('select').on('changed.bs.select', function (e) {
$(this).find(".bs-searchbox input").focus();
});
Also tried this replacing select with class names and IDs, nothing seem to make it focus on the input text. I tried replacing .val() of the searchbox input just as a test and it worked. So really, I think what I'm doing wrong is the focus(); bit, but need general direction.
Here is the original HTML
<select class="selectpicker ingredientsList" name="ingredientsSelection" data-size="5"
id="ingredientsList" title="Search Ingredients" data-live-search="true" >
<option value="0">Milk</option>
<option value="1">Butter</option>
</select>

Maybe because you have many selecpicker and when you select one, it focuses to others. You may do that programmatically by looking more information in here

Try this:
$(document).ready(function () { $('#ingredientsList').focus();});

Load a link inside a SELECT tag in YUI

I have a SELECT with many option items like this:
<select>
<option data-link="http://www.foo.com">Link to Foo website</option>
<option data-link="http://www.bar.com">Link to Bar website</option>
...
</select>
I'd need that when a user change SELECT value, it will be redirected to the corresponding website, which url is in data-link attribute.
My constrain is that I can't use jQuery, I should use YUI.
Please, can you help me?

I've not done much work with YUI, however, when working with it for a similar issue, I came across this post that seemed to work for me. The answer pertained to the code being like follows:
Y.one("#mySelect").on("change", function() {
document.location.href = this.get('value');
});

Show one element in Angular based on select input

Hi I am trying in my AngularJS code, I am trying to show just the appropriate currency based on which currency is chosen from the select . I simplified my code down to just the barebones of what I accomplished so far. I appreciate the help. Thank you. See below http://jsbin.com/najih/1/edit
UPDATE: I have gotten the code to show one value but now the drop down doesn't update the list see the code. http://jsbin.com/najih/3/edit
UPDATE: Ok so I found that on my fiddle it works in IE and Firefox but not Chrome and Safari. Anyone know a reason why?

First you should use ng-options="rate.Name for rate in shots. Then attach a model on the select:
<select ng-model="rate" ng-options="rate.Name for rate in shots"></select>
Now you have the selected rate available and based on your question, which i dont realy understand from this point, you could create a radio button:
<label>
<input type="radio" ng-model="radiorate" ng-value="rate"> {{ radiorate.name }}
</label>
But this doesn't make much sense to me.

disable jquery-chosen dropdown

I have a select div that I'm using the chosen jquery plugin to style and add features to (most notably, search). The div looks something like this,
<select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
<option value=""></option>
</select>
And I'm using the chosen plugin like this,
$('#foobar').chosen();
While some AJAX is loading, I'd like to disable the entire <select> div. Maybe with something like this,
$('#foobar').disable()
or this
$('#foobar').prop('disabled', true)
I think you get the idea.
Any ideas on how to do this? I've tried a number of different things, like using jquery idioms for disabling things, disabling the <select> which just disables the underlying select, not the chosen stuff on top of it. I've even resorted to manually adding another div with a high z-index to just grey out the box, but I think that this is likely to be ugly and buggy.
Thanks for the help!

You are disabling just your select, but chosen renders it as divs, and spans, etc. So after disabling your select you need to update the plugin to make the select widget disabled too. You can try this way:
$('#foobar').prop('disabled', true).trigger("liszt:updated");
//For non-older versions of chosen you would want to do:
$('#foobar').prop('disabled', true).trigger("chosen:updated");
I found the information here
Fiddle
Once you update the widget all it does is it unbinds the click or other events on the plugin and changes its opacity to 0.5. As there is no real disabled state for a div.

In the lastest version of chosen, liszt:updated is not working anymore. You need to use chosen:updated:
$(".chosen-select").attr('disabled', true).trigger("chosen:updated")
Here's a JSFiddle.

PSL was correct, but chosen has been updated since.
Put this after you do the disabling:
$("#your-select").trigger("chosen:updated");

$('#foobar').prop('disabled', true).trigger("chosen:updated");
This works Perfect!!!!
#chosen v1.3.0

You can try this:
$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()

$("chosen_one").chosen({
max_selected_options: -1
});

$(document).ready(function () {
$("#foobar").chosen().on('chosen:showing_dropdown',function() {
$('.chosen-select').attr('disabled', true).trigger('chosen:updated');
$('.chosen-select').attr('disabled', false).trigger('chosen:updated');
$('.search-choice-close').hide();
});
$('.search-choice-close').hide();
});

blur to close select box do not work in chrome?

When user clicks on select box , I want to hide the options menu which I do by firing blur event on select box . Following code works on firefox but not on chrome .
<select id="myselect" name="city">
<option value="default" id="first">Default value</option>
</select>
<script type="text/javascript">
$('#myselect').click(function(){
$(this).blur();
});
</script>
In chrome options menu stays as it is.

I suspect that this is related to user modal state (although I couldn't find any documentation to support it, I might add). I suspect that any event listeners are ignored until the user has made a selection from the options.
To support this, you can see that $(this).blur() fires exactly as expected when we hook it up to the onchange event of the <select>:
http://jsfiddle.net/TkfPN/
It would be far better to simply disable the <select> element. Blurring a focused element is extremely bad HCI and frustrating to the user.

Here is my hack for my problem
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) $(".option").hide();
where class "option" represent all the option of select box.

I found a solution to this. Just delete the select box's node then add it back in! Make sure you're using delegated event handlers. Seems to work in all browsers. Here's my solution in jQuery, but if someone wants to write a pure JS solution, that would be good also.
jQuery('.sortSelect').appendTo('.sortParent');
If it wasn't appearant, the markup in this example works if sortSelect is the last direct child of sortParent. $.insertAfter()/$.insertBefore() would work as well.