Are there any JSFiddle examples of this working? I can't get this to work. The demo looks great, but I cannot figure out how to get the code running correctly.

Regular autocomplete works when using:
<input type="text" list="beers" />

When I add the attributes from the demo, it no longer works:
<input type="text" name="mysuper_field" id="id_mysuper_field" class="js-combobox" list="beers" data-combobox-prefix-class="combobox" />

Here is my JsFiddle:
https://jsfiddle.net/edasxuh0/12/

I would like to get this working and figure out how to dynamically add about 5000 options to the suggestion list. I already have it working in regular autocomplete but I would much rather make it JAWS accessible and compliant.

Any ideas what I am doing wrong? Help?

The datalist-HTML-element gets replaced by a div-construct. It would be better to have it as a UL-list for correct markup.

I used the example code from the README, and added data-combobox-case-sensitive="no" and data-combobox-search-option="beginning":

<input type="text" name="mysuper_field" id="id_mysuper_field" class="js-combobox" list="beers" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="beginning"/>
  <datalist id="beers">
    <option value="Meteor">
    <option value="Pils">
    <option value="Kronenbourg">
    <option value="Kronenbourg 2 (for test)">
    <option value="Kronenbourg 3 (for test)">
    <option value="Grimbergen">
  </datalist>

Searching for "b" should provide no suggestions but gives Grimbergen and the 3 Kronenbourg options as suggestions. This works fine with case sensitivity left as the default (on), but for my use case I need to have it off.

It looks like the issue is in the big conditional that splits for containing/beginning - since the containing section evaluates to true (it winds up as false && (false) || (true)), it doesn't matter that the correct end of the conditional found no results.

First, great script - thank you!

I've noticed that when adding an item to the <datalist> that contains an ampersand, upon selection the ampersand becomes & in the input field and subsequent submitted data. This can be replicated on your demo site using the browser dev tool to change the contents of your beer list, for example. Add "Corona & Lime" and you'll see what I mean.

"Then download the plugin and use jQuery of course."

Which version of jQuery does this need?

I need to fetch the <datalist> data from a server. Would be cool if the plugin would support async data + have a documentation about this matter.

Hi,
I have tested this autocomplete plugin with FF52 - JAWS 17 and NVDA. Great job. But one thing:

Test cases:

• TAB to input "Choose a beer" typing k -> screenreader speaks "... 4 suggestions ..." -> delete k -> typing k agian screenreader still silient
• TAB to input "Choose a beer" typing k -> screenreader speaks "... 4 suggestions ..." -> delete k -> switch to another tabable -> come back to input -> typing k screenreader still also silient

And I am not sure if it a desired behavior. I think it will be good the screenreader speak the suggestion count agian?

Thanks in advance.

Lars

Is it possibile to have multiple inputs that referes to a single datalist.

For example:

<label for="departure">From</label>
<input type="text" id="departure" list="cities" />

<label for="arrival">To</label>
<input type="text" id="arrival" list="cities" />

<datalist id="beers">
  <option value="Rome">
  <option value="Madrid">
  <option value="London">
</datalist>

In case anybody cares, I was able to easily implement "case insensitive" search feature by simply changing one line of code.

I changed this:
( $combobox_case_sensitive==='no' && tablo_suggestions[index_table][i].substring(0,value_to_search.length).toUpperCase() === value_to_search.toUpperCase() )

to instead make use of "contains", like this:
if (tablo_suggestions[index_table][i].toLowerCase().indexOf(value_to_search.toLowerCase()) >= 0)

I also went a step further and limited my output results to only 6 suggestions max, like so:
if ( tablo_suggestions[index_table][i].toLowerCase().indexOf(value_to_search.toLowerCase()) >= 0 && counter < 6)

So now, I am able to apply my keyword to search for a pattern within the entire string, not just from the beginning of the string. This replicates the standard jQuery Autocomplete behaviour, in case you are migrating to this accessible version from that instead.

Here it is in action, in full glory:

See the « publishing npm package » documentation.

As suggested here: https://twitter.com/goetsu/status/701862641933930497

Hi, is there a way to set the plural of data-suggestion-word?
There are some languages (eg: Italian) that use "Suggerimento" for the singular, and "Suggerimenti" for the plural.
Can I set the plural suggestion word via data-*?

Actually the plugin adds the "s" word at the end of the suggestion word, this works for English language but not for other languages.

Thanks

Value for spellcheck attribute on input must be "false" not "off"

Hello Nicolas
First of all thank you for your awesome work.

How can I customize the plugin to enable a minLength attribute?

Thanks

Hi,

I just installed your plugin through npm, but I couldn't import it correctly.

The problem seems to arise because there is no main field in package.json, pointing to the dist file.

Also, there is a little typo in the dist file : jquery-accessible-autocomplet-list-aria.js instead of jquery-accessible-autocomplet[e]-list-aria.js ;)

In the second example using the 'no tab' mode, there seems to be an issue selecting an option with the keyboard (In Firefox, IE11 and Chrome). When selecting an option with arrow down, I loose the selection after tabbing away to the Clear button.
1st scenario : I type 'Cr', then I select 'Croissant au chocolat' with the arrow keys, then I hit TAB. I end up on the 'clear' button and the input only contains 'Cr'. I expect that tabbing away from the list confirms my selection as it would in a select.
2nd scenario : I type 'Cr', then I select 'Croissant au chocolat' with the arrow keys, I hit ENTER. The focus moves to the input which contains 'Croissant au chocolat'. Then I hit TAB. I end up on the 'clear' button and the input only contains 'Cr'. I don't expect my input to disappear when tabbing away.