Jeditable and Jquery UI autocomplete

Jeditable and Jquery UI autocomplete

Hi I'm trying to put JEditable and JQuery UI Autocomplete together, so
when I click a div, the div becomes editable, and the typed in content
will have autocomplete feature, I've tried different solutions from other
posts such as
Jquery ui with Jeditable,
How do you bind jQuery UI autocomplete using .on()?,
Bind jQuery UI autocomplete using .live().
and finally come to some code look like this.
<div class="edit_school" id="edit_school_pending">ADD</div>
$(document).on(
"focus",
".edit_school:not(.ui-autocomplete-input)",
function(event) {
alert("Hey");
$(this).autocomplete(
{source: ["a","ab","aa","ac"]}
);}
);
JQuery version: jquery-1.9.1.js
JQuery UI version: code.jquery.com/ui/1.10.3/jquery-ui.js
When click "ADD", the "ADD" is brought into a textbox, and an alert shows
up, but typing "a" does not show any autocomplete. Please help and bear
with the format if it does not turn out well. A lot thanks.