Autocomplete combobox resets on loss of focus - IE only

Question

I am using jquery.ui.autocomplete on multiple comboboxes on a page. In IE only, the combobox resets on loss of focus (onBlur). No amount of JS debugging can reveal the cause. Any suggestions?

Answer 1

Ok, here's what I came up with. I used your code and replicated your bug.

The reason that IE is different then say... firefox, is this routine:

                                    change: function (event, ui) {
                                        if (!ui.item) {

In firefox, ui.item is not null, in IE it is. So in IE it has to get the actual values of '<option value="foo">foo</option>' the value attribute, and compare with whats in the text box.

Here's the problem:

value="foo" must match exactly what is in >foo<

<option value="5">Five</option> 

Will cause it to clear the field when you blur

<option value="Five">Five</option>

Will not

In firefox and chrome, they pass ui so they don't get this check, it just continues on and everything is cool. Check to make sure your values match exactly what the option text is.

Answer 2

superfro's analysis is correct, but you can use option elements where the value differs from the text if you modify this single line of code:

if (this.value.match(matcher)) {

to:

if ($(this).text().match(matcher)) {

This way, you're matching against TEXT inside of <option value="VALUE">TEXT</option> instead of VALUE.