I'm trying to implement this "filtered dropdown" pattern for mobile users:
By default, of course, a <select> control is closed, until the user clicks it open.
Is there a simple way to keep it always open? I understand it wouldn't strictly be a "dropdown" then - more like a traditional Windows "list" control.
(Multiple select is not appropriate for this application).
I'm using VueJS if that's relevant.
My current code:
<p>Start typing your suburb name...</p>
<input type="text" length="50" v-model="suburbFilter">
<br>
<select id="suburb-select" v-model="suburb" >
<option v-for="suburb in filteredSuburbs">
{{ suburb }}
</option>
</select>
i use this component
https://paliari.github.io/v-autocomplete/, it's pretty customizable
If it's always open, then you could use <input type="radio">.
Create a filterable list a la: https://www.w3schools.com/howto/howto_js_filter_lists.asp
Then, instead of the <a> tags they're using, you can style a radio input in place of it.
Related
I would like to ask how I can focus on a specific item in the long list via a search bar.
example: when a user enters something on the search bar, the list is filtered to find the elements that contain that search key, I would like that if at least one result is found, the focus is placed on the first element found.
when user visit the page:
after the user search a something:
thanks!
i don't know if this solves your problem or not u can use datalist tag in html which work kind of similar it will filter everything except what u have typed in search box instead of focusing at that element.
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
when I didn't set the product size, it will show the text "Must pick 1 size for the product". But it can't show the text. I want to know how to use select and input Element?
<select name="product_size" class="form-control" required oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')">
<option disabled selected>Select a Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
enter image description here
Welcome to StackOverflow!
There are a two things wrong with your code.
The oninvalid callback was never able to be executed, as nothing ever checked for the validity of the select element. You can fix this by wrapping it in a form element and have a <button> in it. When this button gets clicked by a user, the form gets validated by the browser, will see, that the select is invalid and call your oninvalid code.
It is never invalid in chrome. I have tested your code and it worked perfectly on Firefox after wrapping it with a form. Chrome however does not think your default option is invalid to make it think this I added the value="" attribute to it.
A working example:
<form action="javascript:void()">
<select
required
name="product_size"
class="form-control"
oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')"
>
<option value="" disabled selected>Select a Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
<button type="submit">Submit</button>
</form>
I used a select dropdown that is filled dynamically, based on conditions on country>state. But I can not get it out on context for the backend to properly save it to the database (selected value).
I can show the dropdowns correctly and save differently and correctly if I use a asp dropdownlist. Thing is, this code is imported and apparently all I can use if the select value.
<label for="country" class="col-form-label">Country: </label>
<select name="txtAddress_Country" class="countries order-alpha form-control" id="txtAddress_Country" runat="server">
<option value="">Select Country</option>
</select>
<label for="txtPersonal_FirstName" class="col-form-label">State: </label>
In the backend... this function works wonders with dropdownlist and text.
dbCampos.Save(u, new ASF.HC.JobApplication.Entity.Campo("txtAddress_Country", txtAddress_Country.Text));
So I am guessing the place to modify is the frontend.
I am guessing that I am missing some attribute but can not seem to find it. Says that it does not contain a definition for "Text" or accepting a first argument.
Maybe an initial value?
It is better to use instead of html with runat server.
secondly you can try as below:
dbCampos.Save(u, new ASF.HC.JobApplication.Entity.Campo("txtAddress_Country", txtAddress_Country.SelectedValue));
instead of:
dbCampos.Save(u, new ASF.HC.JobApplication.Entity.Campo("txtAddress_Country", txtAddress_Country.Text));
When customising the look of a checkbox using CSS, to be able to work the magic we first need to link an element (eg. label) to the checkbox.
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
However I am using Contact form 7 (wordpress plugin) and I cannot find where to add the id within the checkbox. If you specify an id in CF7 it adds it to the containing div (.wpcf7-form-control), and not the checkbox itself.
Therefore I can't get it working.
Am I missing something? is there another way to link the label and the checkbox?
Many thanks
The format used by Contact Form 7 is a little different from your HTML, but there are some targeting options that should be sufficient to grab any element you need.
When creating your form, you'll generate a checkbox shortcode that looks something like this.
[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]
This code will generate:
A set of two checkboxes
Each of the two is wrapped in a <label> element (the text itself is in a <span>)
A parent element with the id="my-checkboxes"`
So the output markup will look something like this (along with some wpcf7 and Wordpress classes).
<span id="my-checkboxes">
<label>
<input type="checkbox" value="foo" /><span>foo</span>
</label>
<label>
<input type="checkbox" value="bar" /><span>bar</span>
</label>
</span>
Since you have an ID on the parent element, you can target this specific part of the form and elements within it using selectors in CSS or JQuery.
For example #mycheckboxes > label > input and #mycheckboxes > label > input + span.
For better targeting options, you can also create one checkbox per shortcode and assign an ID to each <span> checkbox container.
[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]
Since you're ultimate goal is to feed the information into Contact Form 7 (presumably to email it somewhere), it doesn't matter if you create each checkbox with a separate shortcode.
Question - Re: R brew package with HTML (using Rook)
When using forms to retrieve queries, usually when the screen refreshes, the user's preselected option remains selected in the form. For eg., if there was a name field and I enter John,... enter other form data, hit Submit, when the page refreshes, the form will still show "John" in the name field instead of an empty box.
I can pre-fill an entry in a text type input field using something like --
...
<input class="someclass" type="text" name="Name" value="<%=Name%>" />
... (other form data)
When the user hits submit and the page refreshes, R prefills the name field with the value from <%=Name%>
I'm having some difficult in replicating the same when using drop-down menus. The idea is that when the page refreshes, the option that the user had selected in the previous query will be active.
<select class="someclass" name="group3" style="width:200px;">
<option value="," selected>None</option>
<option value="Name,">Name)</option>
<option value="Phone">Phone</option>
</select>
I think one way could be to enter something like say,
<%if (group3=="Name"){ print("selected") } ... etc for each of those options in the respective lines, but that is a bit cumbersome. Could you please share your thoughts on the same,
Got this working using jQuery finally. The inline <%= if(..) print ("selected") ... within the tags wasn't working.
Add the id=something tag to select --
<select class="someclass" name="group3" id="myselect" style="width:200px;">
<option value=",">None</option>
<option value="Name">Name)</option>
<option value="Phone">Phone</option>
</select>
Add jquery.js to the html file in the header--
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
In my Rook brew file, I have something like,
forminput <- req$GET()
userselection <- forminput$group3 #group3 is the class name for the select statement
and in the HTML document, before the closing form tag, enter the following --
<script>
$("#myselect").val("<%=userselection%>").attr("selected", "selected");
</script>