How to append an unordered list to en exisiting html element using jquery

Question

<input class ="metro" type="text" name="city">

This is input tag as a child of which I need to append an unordered list which is passed as an array to a function call as follows

$("input").autoComplete(["agra","bombay","delhi","chennai"]);

This autocomplete function accepts an array and outputs its elements as an unorederd list which I am not able to do.

Answer 1

$("input").autoComplete({source:["agra","bombay","delhi","chennai"]});

Ref

Answer 2

Demo

$(function () {
    var availableCities = [
        "agra",
        "bombay",
        "delhi",
        "chennai"
    ];

    $("input.metro").autocomplete({
        source: availableCities
    });
});

or

$(function () {
    $("input.metro").autocomplete({
        source: [
            "agra",
            "bombay",
            "delhi",
            "chennai"]
    });
});

Demo

API DOCS

Answer 3

If you want to implement the function on your own, the basic block would be as follows

$(function () {
    var Cities = [
        "agra",
        "bombay",
        "delhi",
        "chennai"
    ];

    $("input.metro").autocomplete({
        $(this).append("<ul>");
        for(i=0;i<Cities.length;i++){
            $(this).children("ul").append("<li>Cities[i]</li>");
        }
        $(this).append("</ul>");

    });
});