When I click on the Select, its showing up below and to right, but I need the select to hang below input and select. Or is there a custom text box with drop down menu?
I am unable to find one, so I thought about building it my self but the drop down is in wrong location, and I dont see any CSS that can help.
<div>
<input type="text" id="Drop_Down_A" value="Select One..."><!--
--><select id="Drop_Down_A1" style="width: 19px; height: 21px;">
<option value="" disable>Select One...</option>
</select>
</div>
Got the answer I was looking for.
I have posted the new result of what I was after.
<div>
<input type="text" list="Drop_Down_A1" id="Drop_Down_A" value="Select One...">
<datalist id="Drop_Down_A1">
<option value="Select One..." disable>
</datalist>
</div>
I think this plugin can help you https://select2.github.io
I am unsure what you want to achieve with this. Maybe live search? You might want to check this https://silviomoreto.github.io/bootstrap-select/examples/
Unfortunately, there is no way to customise the position of the dropdown in the select box.
However, there are alternatives. I think you are trying to achieve a searchable select box, so here are two solutions:
Use <datalist>. Other than Safari, its support is fairly broad.
Using a library, such as 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>
My Question
I searched to figure out my question but I couldn't figure out.
I wonder if it is any way to build select which you even can write like input(type=text). For example, You can select one option from select list or you can write on it without selecting any.
I want to mix functions of two below in one input.
<select>
<option value=1>A</option>
<option value=2>B</option>
</select>
<input type="text">
you can select A or B by select function but if you don't find what you want from select, you can write for example C instead.
Conclusion
I could find refereces for my question when I search with keyword "html combo" My problem was I tried to find with wrong keyword!
simiply, (I mixed HTML5 syntax and HTML4 syntax, i think)
<input type="text" list="test">
<datalist id="test">
<option>Hello</option>
<option>world!</option>
</datalist>
Then this is the answer
<input type="text" list="test">
<datalist id="test">
<option>Hello</option>
<option>world!</option>
</datalist>
I'm trying to make an advanced <select> tag but implementing an input before the first <option> attribute for searching. Something like this:
Here is my code. How can I add <input name="search_category" class="search" /> to my code?
select {
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select size="1" class="selection">
<option>Social</option>
<option>Political</option>
<option>Cultural</option>
<option>Athletic</option>
<option>Other</option>
</select>
Note: I use jQuery.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist
This should solve it, if I understood the question correct.
Have you tried the jquery select2 ?
https://select2.github.io/
I think it will easily solve your problem :)
Not Jquery, but you can use datalist
<style>
input
{
font-size:1.5em;
}
</style>
<input type="text" placeholder="Select" name="cat" list="cat">
<datalist id="cat">
<option>Social</option>
<option>Political</option>
<option>Cultural</option>
<option>Athletic</option>
<option>Other</option>
</datalist>
Note: In chrome you will get the select icon, but may not be mozilla
You can use select2 jquery plugin method to implement dropdown with search functionality.
Here the link with the example.
Hope this one is helpfull.
I made good experiences using a plugin called Chosen:
https://harvesthq.github.io/chosen/
Or Select2:
https://select2.github.io/
If a jQuery dependency is ok...
This is as clear as I know how to be with this issue. I've done what research I can on fixing it, and since it is someone else' work being modified it's hard to find what to do. I am nowhere near proficient enough to do this on my own. Sorry if it's not clear enough!
This theme is no longer supported even though it's pretty new my-horse.com.au. At the top of the page when you hover on the search icon a search area drops down and shows a search area with a few select boxes.
This is the basic on how the form is set up. #search-hover contains #search and #search contains the form. The only issue happens on the select boxes, not standard input boxes.
<div id="search-hover" style="height: 70px;">
<div id="search">
<form id="search-spots" action="http://my-horse.com.au" method="post">
<span id="finish-filter" class="responsive-only"><i class="icon-ok"></i> Finish Filtering</span>
<div class="large-4 columns" id="search-form-column-1">
<label class="sf_if_1222">Country</label>
<input type="hidden" name="has_changed_country" id="has_changed_country" value="false">
<div class="select-replace parent-1222 sf_if_1222 type-dropdown">
<select name="country" class="parent-1222 sf_if_1222 type-dropdown" onchange="jQuery('#has_changed_country').val('true'); jQuery('#search-spots').submit(); jQuery('#has_changed_country').val('false');" style="display: block; opacity: 0;">
<option value="">All</option>
<option value="587">Australia</option>
<option value="3270">New Zealand</option>
<option value="2471">United States</option>
<option value="1409">United Kingdom</option>
<option value="4103">France</option>
<option value="4291">Germany</option>
<option value="1291">Italy</option>
<option value="3322">Spain</option>
</select>
</form>
</div>
</div>
The issue only exists in IE (hahah) as far as I've seen. I've tried a few things using JS to fix the issue, but I'm not very good with it. What happens is when you click the select box and hover over anythin in the dropdown list, the whole search area slides back up.
This is some of the different scripts I've tried without any results yet.
onMouseEnter="document.getElementById('search-hover').style.height = '281px';
onMouseExit="document.getElementById('search-hover').style.height = '70px';
onMouseOver="document.getElementById('search-hover').style.height = '281px';
onMouseOut="document.getElementById('search-hover').style.height = '70px';
onFocus="document.getElementById('search-hover').style.height = '281px';
$("#search select").mouseenter(function () {
$('#search-hover').css({"height","281px"});
});
$("#search select").mouseleave(function () {
$('#search-hover').css({"height", "70px"});
});
and this is the jQuery that I think controls the search area
http://pastebin.com/m3J9DLNH
Can anyone help me with where I might be going wrong or point me in the right direction?
My idea is something like this -
onFocus = get.elementId('search select') then something that tells the CSS for #search-hover to set the height to 281px
something that will run through the whole site easy enough. From what I've read on different forums, IE leaves the 'div' area when it enters the drop down area in a form . I'm not really sure why but it is apparently something that happens a lot. I'm basing what I've found on this
IE select issue with hover
which I tried to figure out how to implement in to my form, but don't know how since I'm not any good with JS.
Thank you for any help you can give!
I believe there is already some code in the plugin to try and correct this issue.
Unfortunately, the code tries to detect IE and fails as the detection method is no more working with recent versions of IE.
Try and update the code navigator.userAgent.toLowerCase().indexOf("msie") != -1 in searchShowOnHover with navigator.userAgent.toLowerCase().indexOf("trident/") != -1.
So I am trying to use XMLHTTPRequest to get some information from another page. It will have several <option>s, a variable number of them.
My thoughts were that I could get all of these options, outputted as text, and insert them wholesale into the select menu. Would this be possible? An example of what I want to do:
<select name="culture[]" onSubmit="formValidation()" multiple="multiple" id="cultpicklist"></select>
is the select menu, and then I would do something like this (pseudo-code)
txtobjfromXMLHTTPRequest would be this:
<option value="41" name="culture[]">testculthy</option>
<option value="47" name="culture[]">ereeevvv</option>
<option value="49" name="culture[]">yep</option>
<option value="50" name="culture[]">addanother</option>
txtObj = txtobjfromXMLHTTPRequest //to shorten what I have to write/what you have to read
document.getElementById("cultpicklist").value(txtObj)
Would this work? Am I on the right path? How should I change this?
You should try using .innerHTML:
document.getElementById("cultpicklist").innerHTML = txtObj;
You should however thoroughly test this in all the browsers you support, as there are some cross browser issues with this.
...and here's the fiddle: http://jsfiddle.net/5PGF6/