Jeditable and Jquery UI autocomplete

Question

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

1. Jquery ui with Jeditable,
2. How do you bind jQuery UI autocomplete using .on()?,
3. 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.

Answer 1

Finally figured this out, for those who are also new to JEditable/Autocomplete, here's the working code:

    $(document).on(
        "focus", 
        ".edit_school", 
        function(event) { 
            alert(event.target);
            $(event.target).autocomplete(
                {source: ["a","ab","aa","ac"]}
            );
        }
    );

 <div class="edit_school" id="edit_school_pending">ADD</div>

Last post was not working due to call of "$(this).autocomplete()", here, $(this) refers to the div, not the input created by the JEditable. I was trying to set an id for the input created, but was not able to do that. But then figured out I have the access to the input element itself (event.target), and then call inputElement.autocomplete fixed the problem.