Is there anyway using Select2 displaying as textbox instead of a select tool look?
According to the docs:
Select2 also supports multi-value select boxes. The select below is
declared with the multiple attribute. Select2 automatically picks up
on this:
<select multiple>...</select>
This is what gives the 'text box' look.
Or, if you are only after a single selection you could just change the CSS styles of the existing select tool to make it 'look' like a standard text box.
Steven, this is true, however, display is using tags and I guess we all want the input/box view.
Based on select2 v4.0.0, it seems we can choose his adapter (single or multiple), but I have been unable to force it (nor enter free entry !)
Related
I'm currently trying to make a select dropdown (option, select) with a design like the following picture
enter image description here
When selected > 10 then the select dropdown option appears input text to fill in the desired amount.
Has anyone ever made something like this.
Thank you.
I think you'll just add an if statement for > 10 then the input display will change from none to whatever you want.
The kind of drop down list requested can not be constructed simply using a combination of HTML select and option elements. This is because the only permitted content type of Option elements is text, although HTML character entities may be used. (If you need to expand character references when setting an option element's content, use its innerHTML property instead of texContent.)
I would suggest searching for an already available HTML/JavaScript/CSS widget fulfilling a similar purpose, whether it be a self contained package or library plugin, before starting to write your own code from scratch.
Regarding JQuery and JQueryMobile,
Code is in this JSFiddle link: https://jsfiddle.net/nyluje/jg5cgw76/7/
I use a flipswitch to change, if a select object has the attribute multiple or not.
At first the flipswitch is off and the attribute multiple does not apply on the select.
If I use the select, I can choose only one single option (this works fine).
Then I turn the flipswitch to on. Now with the code I implemented in the function setSelectAccordingToFs() the attribute multiple is added to the select and it is then possible to pickup multiple options. But one notices that the pop-up, which is not a native menu one, does not display the multiple select correctly, like on this picture:
It keeps on displaying the single select panel. Which does allow to add up options, but does not provide the possibility to take off some:
Hence I wonder: How to refresh the select panel menu used by a select, depending on the attribute multiple value:'off' or 'on', on that select tag?
Any idea?
Ok I found the solution. I implemented it in this version of my JSFiddle: https://jsfiddle.net/nyluje/jg5cgw76/8/
The trick:
Using the option 'refresh' wasn't enough. To (really) refresh the selectmenu and include the panel in this refresh, the 'destroy' and 'enable' functionnalities have to be used. So at the bottom of my function setSelectAccordingToFs() I added something like that:
targetSelect.selectmenu('destroy');
targetSelect.selectmenu();
targetSelect.selectmenu('enable');
targetSelect.selectmenu('refresh',true);
I have multiple instances of select2 elements in my form, but in one of them (which is on a hidden input) I want to just tokenize the input.
I dont want the dropdown to ever show because it always shows "no matches found" and it confuses users. So I need to disable just the dropdown and use select2 as only a tokenizer for that specific element. Is that possible?
(I know I can do this easily with out the plugin but I want to use the plugin as it decorates the tokens and removes icon and it will be uniform with other inputs that use it)
Used the approach described by #Paralife.
Found there is a option dropdownCss which sets the dropdown style. So dropdownCss:{display:'none'} is enough to disable it as well.
I found a solution:
In the constructor, I put the option dropdownCssClass: 'noshow' and then just css it:
.noshow { display:none !important;}
This always hides the whole dropdown.
For my website, I need to have a way for users to enter their cities.
I'd like to use 2 drop-down list for that: a "State" and a "City" drop-down lists. The choices in the "City" list would depend on what "State' has been selected.
However, there bound to be cases where a user's "City" is not in the drop-down list. To handle those cases, I want the "City" input to be a "hybrid": while users could select a choice from a drop-down list, they could also use the input as a textbox and simply type out their city name.
An example of what I have in mind is Google Map. Enter any address into Google Map. Then click on "Directions" on the left panel. Then click the "By public transit" icon (2nd icon from left). The right-most drop-down box is what I'm talking about. You could select choices like "1:00pm", "1:30pm", "2:00pm" etc from a drop-down list. But you could also just type out a time like "1:23pm" inside the box.
How do I do something like that? Is there any javascript library/framework that does that? I'm currently using jQuery.
There are lots of JavaScript examples of this, using JQuery, or native JS. They're typically called combo boxes - for their ability to select from the drop-down or accept typed entry - most of them including settings to enable free-form entry vs forcing selection from the list only. I don't have any experience with a specific type, so I won't make a recommendation, but if you Google "javascript combo box" that'll get you started in the right direction :)
If you view source on the GMaps directions page that you are referring to, you can see how they do it; the "dropdown" button is really just an image. When a selection is made from the dropdown, the value is put into the textbox.
Some solutions I've found for whom it may concern:
Using select2 library and Tagging .
Selectize is the hybrid of a textbox and box.
Using Vue frawework see vue-multiselect and tagging support.
So probably you can consider "select taggging support" a good combination of words to search at Google.
IN my case i want to implement multi select auto complete combobox using html,javascript.
Is there any body who knows how to implement it.
Which will be similar to text field shown in stackoverflow while adding multipal tags to any question.
If you are talking about multiple drop down boxes that are linked, so that the selection in the first drop down menu determines the possibilities in the next, then the ASP.NET Toolkit has a nice cascading drop down sample. This will only, of course, come in handy if you are programming in ASP.NET. I would not recommend trying to reverse engineer the solution.
What do you mean by auto populate?
If you want to populate the drop down box dynamically you can just use a normal HTML Select tag and use Ajax to fetch the list of values to be shown in the drop down