Question

I’ve got a jquery_ui autocomplete. When I click on a selection in firefox my code runs as anticipated. When I run it in IE8, something is clearing the selection from the input box (after all my code is run).

I can’t identify the code that’s clearing the field – I’m stepping through the code, but it happens at different points – I’m stepping over lots of timeouts, so perhaps its one of these.

I guess I’m hoping that someone has come across this before..

UPDATE

OK, I’ve managed to track down the issue a bit further. It’s code I’ve attached to a focus event that’s actually removing the text. My problem seems to relate to a difference in the order events are fired between ff and ie

I’ve got a demo available on jsfiddle – http://jsfiddle.net/aidanewen/nKyLu/

And I’ve included my code below –

<script>
   $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags,
            select: function(event, ui) {
                $('#output').val(ui.item.label);
            }
        }).focus(function(e) {
            $(this).val("");
        });
    });
</script>

<div id="content_padding">

        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags"/>
            <label for="output">Output: </label>
            <input id="output"/>
        </div>

</div>

Answer 1

The solution was to add return false to the focus event –

    $( "#tags" ).autocomplete({
        source: availableTags,
        select: function(event, ui) {
            $('#output').val(ui.item.label);
        }
    }).focus(function(e) {
        $(this).val("");
        return false;
    });