This question already has answers here:
How to style the browser's autocomplete dropdown box?
(2 answers)
Closed 9 years ago.
Defaultly, when you input something to text field, you get suggestions with values you entered before. So my question is, is it possible to use CSS to modify appereance of that suggestion dropdown. Or could you please suggest javascript code to recreate its bahavior?
No, it is browser's native implementation. the browser doesn't even add or modify any new DOM element therefore you can not style the dropdown list. I am not 100% sure but it looks like the drop down list is on a different layer on top of the display page. You will need to have a your own Javascript implementation of autocomplete.
By the way to disable this browser behavior, add this to the input element:
autocomplete="off"
Note that not all browser support autocomplete attribute
You can't fiddle with the native browser's autocomplete box, but you can with custom implementations. I'd wager the most popular is this one: http://jqueryui.com/autocomplete/
I should note that the custom implementation won't serve up values the user has entered before unless you are capturing each term the user is entering, and use that list to populate your autocomplete box.
Related
This question already has answers here:
jQuery change input type=text to textarea
(4 answers)
Closed 4 years ago.
How can I make an INPUT field dynamically change itself into a TEXTAREA in the browser, based on certain conditions (like the amount of text in it), without any extra logic server-side?
I have not tried anything yet, because I don't want to reinvent the wheel. I searched SO and found nothing. I'm looking for something like:
$('#myinputfield').automatically_morph_input_type_based_on_contents();
I doubt you'll find anything that is already prebuilt.
A simple thing you should consider is that, whether you really need an input or a textarea. And if you still think you need to switch between the too then you'll just have to dynamically create the two.
First remove the old element, create the new element, use the value, id, name and other attributes from the old element. Apply the same process for the next change.
I have an autcomplete of my site.
When you start typing the entire box shows.
Is there an option we can add, that only the options that have to do with the letters i typed should show up?
Your question is similar to a few other SO questions. Rather than copy their answers to here, you can check these links out and see if the accepted answers will assist you in your case.
jQuery UI Autocomplete widget search configuration
jQuery UI Autocomplete use startsWith
This question already has answers here:
Custom alert using Javascript
(6 answers)
Closed 7 years ago.
In a static html page i want to do following actions:
as the url is entered first I want to display the terms and conditions using window.alert("TERMS AND CONDITIONS").
In the dialogue box I want two buttons "agree" and "dont agree". If agree is pressed I want to use window.location.assign("next page url") .And if dis agree is pressed I want to use window.close("","_self")
I'm a total beginner and have minimum knowledge of Javascript.
Thank you in advance.
You can not modifiy the default alert dialog.
But instead, you can use one of the many Dialogs made for jquery and other libraries.
http://www.sitepoint.com/14-jquery-modal-dialog-boxes/
The alert box is a system object, and not subject to CSS. The jQuery UI Modal box does a lot of the work for you Link.
if you want a basic browser graphic u can use
window.confirm("TERM AND CONDITIONS");
that return true or false based on action. For more advaced usage check jquery dialogs boxes (docs https://jqueryui.com/dialog/ ) or bootstrap (docs http://nakupanda.github.io/bootstrap3-dialog/)
I was wondering if it's at all possible to style the autocomplete box that appears from input fields.
( I know This question is the same but that doesnt have a answer and since its a few months old i figured i made a new post about it)
That image is of my login screen with the autocomplete box being all square and bulky compared to my input field. If it's not possible to style the box i'll simply turn autocomplette off but if it's at all possible i would be very interested.
New screenshot:
Yeah you can't do that since it's browser based. Here's a great example in jQuery that uses autocomplete. I use it all the time for sites - super slick.
http://www.devbridge.com/sourcery/components/jquery-autocomplete/
You can't modify the browsers' native functionality. Your best option is to find a plugin that overrides the autocomplete drop-down functionality and modify the code and style to your liking. Please take a look at jQuery's autocomplete plugin. http://jqueryui.com/autocomplete/#custom-data
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
Is it possible to open the drop down list of a Select element when the Select element gets focus?
I know it automatically focuses when you click it ... but I want it to work when you tab it too.
Unfortunately the answer for your question is simply "No, its not possible with the current HTML and Javascript controls"
However, if you use jQuery and this plugin (https://github.com/fnagel/jquery-ui/wiki/Selectmenu) for select menus i believe you could do :
$("#idofSelect").selectmenu("open");
Also another alternative for your idea, but maybe not as fancy:
document.getElementById("idOfSelect").setAttribute("size", 5);
What this does is simply make it a multiline select, so in some way it displays the options...
You could do this on focus, and then do another event on click where you reset its size to 1 and stop the event propagation (so that onfocus doesn't get called after..)
but like i said, this is THAT professional, so either live with your select the way it is, or switch to jQuery select menus and have fun opening and closing them dynamically at your will :)
As a starting point, if using JQuery you could use the trigger function eg If your select box has an id of "names" simply call $('#names').trigger('click');