jquery - 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

终于弄清楚了，对于那些对 JEditable/Autocomplete 也不熟悉的人，这里是工作代码：

    $(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>

由于调用“$(this).autocomplete()”，上一篇文章无法正常工作，这里，$(this) 指的是 div，而不是 JEditable 创建的输入。我试图为创建的输入设置一个 id，但无法做到这一点。但后来发现我可以访问输入元素本身（event.target），然后调用 inputElement.autocomplete 解决了这个问题。