views:

1683

answers:

2

Iam using this plugin.

How do I show all the options available in the dropdown for an input field when it receives focus? Right now , I have to type something for the plugin to filter the options.

What I have right now

var $sessionTimes = "00:00 00:15 00:30 00:45 1:00 1:15".split(" ");
$(".autocompleteTime").autocomplete($sessionTimes);

<input type="text" class="autocompleteTime" size="5" />
+1  A: 

I think a standard combobox is more what you need.

<select>
    <option value="15">00:15</option>
    <option value="30">00:30</option>
    <!-- etc etc etc -->
</select>

jQuery isn't always better.

Natrium
Why this answer was voted down?
Kamarey
probably because I did not provide a direct answer to the question, although I am sure a combobox would be better.
Natrium
@Natrium, I wanted an autocomplete instead of a dropdown because sometimes the session times could be 1:05 or 1:10 ( five minute increments instead of fifteen minute) or the user may want to use 12hr format (am/pm) instead of 24hr, so an input box is better in this case
krishna
in my opinion, this can all be fixed in a combobox.
Natrium
Dropdown's usability is quite poor especially if you have lots of values to choose from. I've done some time editing in the past and I must say this is a good solution to give users the ability to quickly choose from 15 minute increments and then edit to a more specific time if they want to.
inkredibl
+4  A: 

You have to set minChars to be 0, like this:

$('.autocompleteTime').autocomplete($sessionTimes, {minChars: 0});

Also note that you don't have to start variable name with a $, you could just write sessionTimes everywhere you use it and it would be okay. Probably coming from a PHP background? :)

inkredibl
Thanks inkredibl. That works. Well, i like dollars more the better :)
krishna
I tried this but you still need to press down arrow or click the control to actually show the autocomplete options.
Fajar
Maybe from a Perl background ?
alex
@Fajar What do you mean? Of course the user has to trigger it. If you want it to trigger automatically just call `click()` on it, i.e. `$('.autocompleteTime').click()`
alex