I want users to be able to type text into the text box I set up.
If they do not know their options, I want them to be able to click expand and select from a drop-down menu, such as on this page.
How can I get this?
For HTML only solution use <datalist>:
<input list="somelist" name="myBrowser" />
<datalist id="somelist">
<option value="option1">
<option value="option2">
<option value="option3">
</datalist>
For a bit more custom solution you can use jQuery UI's Autocomplete
To get more options you can use select2
Related
I would like to have a text-input field that also has an optional drop-down. The ideal ui would look like a text input on default and accept text but when you click an arrow, a drop-down will show. It would also be nice to have the drop-down be implemented with select2 to allow easy searching of values (and that's what I've tried already).
My first attempt used the tagging feature in select2 but it's not exactly what I want as the user will type and then have to select their new input. The default is also not a text-input in this case. Thanks for any help. Also the options can't be hard-coded as we're polling a db for the items that the list would show.
updates:
An example would be something similar to this: jqueryui.com/datepicker/#icon-trigger... where the default is an input text field and we have a button to select the date, but in this case, it's a button which would overlay a drop-down on the text-field.
I also looked at datalist and that would work but I don't think you can not hard-code the options.
Something like this: http://jqueryui.com/autocomplete/#combobox .. would be perfect. But changes would be that it has to accept any entered option rather than reject it and also grab from a list instead. I'm not too familiar with front-end stuff, so if this is possible to do, can you let me know how and the basic idea? I don't think the list can be populated with something like a http get request?
try using datalist html tag:
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
I have a dropdown with a floating label, it doesn't toggle unless I click on the form element itself, clicking on the label it is not working, is there a way to do this either in react, javascript (I read no), or CSS.
Thank you
<select id="age" name="age">
<option disabled></option>
<option value="1">0-10</option>
<option value="2">10-15</option>
<option value="3">15-20</option>
<option value="4">20+</option>
</select>
<label className="animated-label" htmlFor="age">
Age
</label>
Using the label for it doesn't work. Is there anyfunction that I could use to manually toggle the dropdown open programatically
Sharing your code with us would help us understand more about a problem you are facing.
The solution here should be very simple on your label tag add attribute "for" so it is consistent with the select menu id.
Example:
<label for="dropdown-menu">
My dropdown
<select id="dropdown-menu">
<option>...</option>
</select>
</label>
I want edit text with a drop down box along with custom scrollbar so end user can add data explicitly or can add from drop down box. The final entered value by end user should be saved.I want this in UI development preferably angular js.
Well from what i understood , you need a text input as well as a dropdown input together.
To be frank , this is quite easy and i dont understand what caught you up in this.
So here is the code:
<input type="text"/>
<select style="width:20px;">
<option value=""></option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Check out the jsfiddle here:
https://jsfiddle.net/kna3fj5t/
I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.
Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!
I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using javascript?
As an example, I have a datalist on an <input type="number"> (jsFiddle).
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.
I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?
I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.
If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.
If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete
Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child elements for every country directly in an HTML page:
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Ă…land Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
...etc...
</datalist>