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>
Related
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>
Ok, so i have a simple thing on my website where users can enter a phone number and text them, so when they enter the phone number they need to select an item in a dropdown list with all country dial codes, the problem is that the dropdown list is as long as my textbox which makes everything look quite awkward, I've done some research and have messed around with it myself without any luck, just for an example here is what i am talking about (btw i use the bootstrap framework so any answer would need to support bootstrap)
As you can see the text box is actually smaller than the dropdown list which makes it look kinda weird, i would like to somehow scale down the dropdown so it looks better along side my text field.
Thanks for reading, any help will be appreciated!
EDIT:
My current code for this <select> dropdown looks like this
<select class='form-control'>
<option value='213'>Algeria (+213)</option>
<option value='376'>Andorra (+376)</option>
<option value='244'>Angola (+244)</option>
<option value='1264'>Anguilla (+1264)</option>
<option value='1268'>Antigua & Barbuda (+1268)</option>
<option value='54'>Argentina (+54)</option>
<option value='374'>Armenia (+374)</option>
<option value='297'>Aruba (+297)</option>
<option value='61'>Australia (+61)</option>
//There is more countries..... I just cut it here so it won't be too long
</select>
I have the following code:
<form:select path="roles" items="${roleList}" itemLabel="roleType" itemValue="id" />
It generates html as below:
<select id="roles" name="roles" multiple="multiple">
<option value="1">ROLE_ADMIN</option>
<option value="2">ROLE_HQ</option>
<option value="3">ROLE_MASTER</option>
<option value="4">ROLE_STATE</option>
<option value="5">ROLE_CENTRE</option>
</select>
Also I do not use the multiple optional attribute. Any idea why does the generated HTML contain "multiple="multiple" ?
Just a guess, but since you mapped it on roles, and since roles is probably a collection, it makes sense to make the select box multiple. If it was not multiple, you would only be able to store a single item in the collection. And the tag would not be able to display the selected roles.
EDIT: after reading the source code of the tag, it appears my guess was right. See the forceMultiple() method in SelectTag.
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>
I have created a select list with some option values inside an asp.net tablecell. For some reason VS10 keeps placing more and more non breaking spaces into the code before the option values. I have to keep deleting them because it eventually fills the page with them. Here is my original code:
<asp:TableCell>
<select id="selectBankID" onchange="changeFormatLabel(this.options[this.selectedIndex].value,'txtBankIDFormat')">
<option value=""></option>
<option value="SWIFT (W/Branch)">SWIFT (W/Branch)</option>
<option value="SWIFT (W/O Branch)">SWIFT (W/O Branch)</option>
<option value="BSB">BSB</option>
<option value="BIC">BIC</option>
<option value="TRNO">TRNO</option>
<option value="BLZ">BLZ</option>
<option value="UKSORT">UKSORT</option>
</select>
</asp:TableCell>
On its own, without my saving or anything, a bunch of nbsp characters appear out of nowhere and just keep multiplying as I keep working on other parts of the page:
<asp:TableCell>
<select id="selectIntermedBankID" onchange="changeFormatLabel(this.options[this.selectedIndex].value,'txtIntermedBankIDFormat')">
SWIFT (W/Branch)
SWIFT (W/O Branch)
BSB
BIC
TRNO
BLZ
UKSORT
Of course, they don't display nicely in the code window on this site, but they are there. What the ##$!* is going on? Visual Studio hatred for non asp tags?
As stated above, just used a dropdownlist instead of standard HTML selectlist.
Friends there is a simple solution for this...
Remove all spaces and carriage returns with in the control. Problem will be solved
for eg: if your control is like
<Select>
<Option>1</Option>
<Option>2</Option>
</Select>
Solution is to make the mark up as following
"12"
Let me know whether you are still facing this issue