How to use jQuery.autocomplete on a hidden input field (type=“text”)?

Question

I am trying to use the autocomplete from jQuery on an text field inside a hidden div. It doesn't seem to work, though the input field gains the ui-autocomplete-input class. It's like no event is bound to my input.

Just to be clear, the code looks like this:

<a href="#overlay" class="open-the-overlay-that-has-the-id-like-this-href-attribute">OPEN</a>

<div id="overlay" style="display:none">
    <form action="/action" method="post">
        <input type="text" id="my-unique-id" />
        <input type="submit" />
    </form>
</div>

<script type="text/javascript">
$(document).ready(function(){

    $("#my-unique-id").autocomplete({
        source: "search.php",
        minLength: 2
    });

});
</script>

After this, the #my-unique-id gains the ui-autocomplete-input class but has no events bound. Any ideas?

Here is the server side script, but it's nothing wrong with it, because on another field it works fine:

(CakePHP)

function getCity() {

    $this->layout = FALSE;
    $this->autoRender = FALSE;
    Configure::write("debug",0);

    if(isset($_GET["term"]) && !empty($_GET["term"])) {
        AppModel::unbind($this->City);
        preg_match_all("/(\w+)/",urldecode($_GET["term"]), $term);
        $or = array();
        foreach ($term[0] as $t) {
            if(strtolower($t) != "jud")
            $or[] = "City.name LIKE '%$t%'"; // OR City.county LIKE '%$t%'
        }
        $or = implode(" OR ", $or);
        $cities = $this->City->find("all", array("limit"=>30, "fields"=>array("City.id", "City.name", "City.county"),"conditions"=>array($or)));
        $returnArray = array();
        $k = 0;
        foreach($cities as $c) {
            $returnArray[$k]['id'] = $c["City"]["id"];
            $returnArray[$k]['label'] = $c["City"]["name"].", jud. ".$c["City"]["county"];
            $returnArray[$k]['value'] = $c["City"]["name"].", jud. ".$c["City"]["county"];
            $k++;
        }
        return json_encode($returnArray);
    }
}

Answer 1

Your code is correct, what could be wrong is your server side script which is not returning data and so it looks like nothing is happening. Could you please post your server side script?

You could also try with a local datasource:

    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

 $("#my-unique-id").autocomplete({
        source: availableTags ,
        minLength: 2
    });