Jquery UI autocomplete

Demonstration of the differences between the text box "change" events and the autocomplete "change" events. Try: - typing something into the text box and pressing return - typing something into the autocomplete and pressing return

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
 <h1>Form</h1>

<form>
    <dl>
        <dt>Text box</dt>
        <dd> <input id=text type=text /> </dd>
        <dt>Autocomplete</dt>
        <dd> <input id=autocomplete type=text /> </dd>
    </dl>
    <input type=submit value=submit />
</form>

<h1>Events</h1>

<div id=events></div>

JavaScript

$(function () {
    var writeEvent = function (text) {
        $("<p>").text(text)
            .appendTo("#events")
            .addClass("event")
            .removeClass("event", 300);
    };

    $("#autocomplete").autocomplete({
        source: ["alpha", "beta", "gamma", "delta"],
        change: function () {
            writeEvent("autocomplete change event");
        }
    });

    $("#text").change(function () {
        writeEvent("text box change event");
    });

    $("form").submit(function (evt) {
        writeEvent("form submit");
        evt.preventDefault();
    });
});