How to implement input search for dropdown values - javascript

Below is the example I implemented. I want when a user gives input it should match the result and should be selected after typing. Can this implemented with HTML or jQuery or Javascript? Thanks in advance.
<select id="funsports" name="funsports">
<option value="">sports</option>
<option value="football">grapes</option>
<option value="tennis">mango</option>
</select>

To achieve what you want, you can use a jquery plugin like Select2
Look at the demos to be sure it has what you're looking for

Related

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

create textbox inside select

here is my simple html code for drop down list:-
<span id="Div_List">
<label for="Gender">For:</label>
<select name="Gender" id="Sex">
<option value="1">1000mtr</option>
<option value="2">1500mtr</option>
<option value="3">2000mtr</option>
</select>
</span>
i want to create one textbox inside select.
how its possible?
if any way to do this please suggest your idea.
thanks.
I guess you're looking for something like this.
Its impossible using strict html. You have to emulate it.
For example chosen is really nice plugin which you can check.
You can use jQuery .comboBox() in jQuery.It will hide the selectbox and it creates a text box to enter the data which is going to autopopulate
Read this for more info:
I hope it helps.

How to set the selected field of combo box within the view

I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!
you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this
I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.
First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});

HTML SELECT List showing description in columns for every OPTION

I want to showin my HTML SELECT the values from the list on something like this for every OPTION
DESCRIPTION | TYPE
-------------------
CAR TERRESTRIAL
AIRPLANE AIR
SHIP WATER
something like that, it is possible???
Thanks.
Like David Thomas said. This is not really supported. But you can hack it. Make your font monospaced and space your option text object accordingly with non-breaking spaces.
Example: http://jsfiddle.net/Aq5LS/
To make it really nice, you need to implement your own combo box. Or use one like Ext JS's, http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/forum-search.html . Using Ext-JS just for this is definitely overkill, but it shows you what can be done.
Your options for formatting text within a standard HTML select element are pretty limited, and I don't know of a reliable way to format option elements the way you requested.
One option would be to put the description in the title attribute of each option, which would show the description when a user hovers over an option (not sure about browser coverage here).
Another option would be to use a custom dropdown box control, which would give you much more liberty to format the options as you please. Searching for "jquery dropdown" should give you a good place to start.
Demo
There's already something out there sort of like that.
<select>
<optgroup label="Terestrial">
<option value="Car">Car</option>
<option value="Tank">Tank</option>
</optgroup>
<optgroup label="Air">
<option value="Airplain">Airplain</option>
<option value="Helicopter">Helicopter</option>
</optgroup>
<optgroup label="Water">
<option value="Ship">Ship</option>
<option value="Submarine">Submarine</option>
</optgroup>
</select>

Looking for a Dijit Widget which works like a default html select

I'm looking for a dijit widget which works like a normal html select (combobox).
all dijit widgets i found until now, have an editable text box.
I prefer to have a drop down box only and no editable textbox.
<select name="aCombobox">
<option value="1" selected="selected">Hund</option>
<option value="2">Katze</option>
<option value="3">Maus</option>
<option value="4">Waldelfe</option>
</select>
Also important for me is, that the upper code is working with the widget and the widget have to use the "Value" values and not the display text.
I checked this dijit widgets: combobutton, combobox, filteringselect, dropdownbutton.
Maybe there is an attribute i forgot to set.
Is there a widget which meet my requirements?
I think you need to use dijit.form.FilteringSelect:
<select name="aCombobox" dojotype="dijit.form.FilteringSelect">
<option value="1" selected="selected">Hund</option>
<option value="2">Katze</option>
<option value="3">Maus</option>
<option value="4">Waldelfe</option>
<script type="dojo/connect" event="onChange">
console.log( 'picked ' + this.attr('value') +
' = ' + this.attr('displayedValue') );
</script>
</select>
Hope this helps.
If you are feeling adventurous, you can try out dijit.form.DropDownSelect. It just got added on 7/21 to trunk. Here's the test.
I'm new so can't leave comments yet, but seth mentions dijit.form.DropDownSelect being in trunk - this is for 1.4 I believe; 1.3 has it in dojox as dojox.form.DropDownSelect
dijit.form.Select is what you need. It's in the latest builds and will be in 1.4. You can currently download it as part of the development release. The test page has a bunch of demos.
It looks as if this replaces the dijit.form.DropDownSelect that seth mentioned.
We had the same problem about 6 months ago. We ended up using FilteringSelects, which was ugly. Nice to see that the Dojo people have finally made a proper select list.

Categories

Resources