How to implement jquery mobile autocomplete in dynamically created input

Question

My textbox along with data is being dynamically generated in javascript how do i apply a jquery mobile autocomplete on the data

    function getHtmlRelate(datat) {
    var demodata = '';
    var labeldata = "";
    var inputname = "";
    var dropdownidandname = "";
    var relateModule = "";
    var showstar ="";
    for (data in datat) {
        if (data === "required") {
            if (datat[data] === 1) {
                demodata = demodata + ' ' + data;
                showstar="<span style='color:red;'>*</span>";
            }
        } else if (data === "group" || data === "options" || data === "len" || data === "calculated") {

        } else if (data === "name") {

            inputname = datat[data];
        } else if (data === "id_name") {

            dropdownidandname = datat[data];
        } else if (data === "related_module") {

            relateModule = datat[data];
            console.log("related module= " + relateModule);
        } else if (data === "label") {

            labeldata = "<label for=" + datat[data] +' '+showstar+">" + datat[data] + "</label>";
        } else if (data === "module_name") {

            module_name = datat[data];
        } else {

            demodata = demodata + ' ' + data + '="' + datat[data] + '" ';
        }
    }
    ;

    return labeldata + '<input data-typeahead="' + relateModule + '" data-typeahead-dropdown-id="' + dropdownidandname + '" type="text" name="' + inputname + '" id="' + inputname + '" onkeyup="getDropDown(this.value,\'' + relateModule + '\',\'' + dropdownidandname + '\')"/><select name="' + dropdownidandname + '" id="' + dropdownidandname + '"></select>';

}



function getDropDown(currentinput, relateModule, dropdownId) {

    var mymodule = relateModule.toLowerCase();
    var query1 = currentinput;
    var dropdownhtml = '<option value="0">Select</option>';
    $.post(getrelaterecords + relateModule + '&query=' + query1,
            {session_id: sessionStorage.sessionid},
    function(data) {
        data.forEach(function(entry) {
            dropdownhtml = dropdownhtml + '<option value="' + entry['id'] + '">' + entry['name'] + '</option>';
            console.log("options are - " + dropdownhtml);
        });
        dropdownhtml = dropdownhtml;
        console.log("html is " + dropdownhtml);
        $('#' + dropdownId).html(dropdownhtml);
    });
}

I am using a Drop down right now but want to use a ListView autocomplete but can't find out a way to implement it

UPDATE:

function getLiForRelate(relateModule, dropdownId) {

    var mymodule = relateModule.toLowerCase();
   // var query1 = currentinput;
    var dropdownhtml = '';
    $.post(getrelaterecords + relateModule,
            {session_id: sessionStorage.sessionid},
    function(data) {
        var dropdownhtml = '';
        data.forEach(function(entry) {
            dropdownhtml += '<li><a href="#" data-itemid="' + entry['id'] + '">' + entry['name'] + '</a></li>';
        });


        $('#' + dropdownId).empty().append(dropdownhtml).listview("refresh").filterable("refresh");
//        dropdownhtml = dropdownhtml;
        console.log("html is " + dropdownhtml);
       // $('#' + dropdownId).html(dropdownhtml);
    });


}



function getHtmlRelate(datat) {
var demodata = '';
var labeldata = "";
var inputname = "";
var dropdownidandname = "";
var relateModule = "";
var showstar = "";
for (data in datat) {
    if (data === "required") {
        if (datat[data] === 1) {
            demodata = demodata + ' ' + data;
            showstar = "<span style='color:red;'>*</span>";
        }
    } else if (data === "group" || data === "options" || data === "len" || data === "calculated") {

    } else if (data === "name") {

        inputname = datat[data];
    } else if (data === "id_name") {

        dropdownidandname = datat[data];
    } else if (data === "related_module") {

        relateModule = datat[data];
        console.log("related module= " + relateModule);
    } else if (data === "label") {

        labeldata = "<label for=" + datat[data] + ' ' + showstar + ">" + datat[data] + "</label>";
    } else if (data === "module_name") {

        module_name = datat[data];
    } else {

        demodata = demodata + ' ' + data + '="' + datat[data] + '" ';
    }
}




      getLiForRelate(relateModule,dropdownidandname);

  return labeldata + ' <ul id="'+dropdownidandname+'" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search items..."></ul>';

}

ezanker · Accepted Answer · 2014-07-14 18:40:22Z

1

+50

When you add dynamic items to the autocomplete listview, you need to call refresh for both the listview widget and the filterable widget:

var dropdownhtml = '';
data.forEach(function (entry) {
    dropdownhtml += '<li><a href="#" data-itemid="' + entry['id'] + '">' + entry['name'] + '</a></li>';    
});

$("#autoComplete").empty().append(dropdownhtml).listview("refresh").filterable("refresh");

Here is a working DEMO

answered Jul 14, 2014 at 18:40

ezanker

24.7k1 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

vini Over a year ago

How do i call my get dropDown function here with your edited code could you please help with that

ezanker Over a year ago

@vini, how do you call it now? It is the same, just instead of building option dom elements you now build listitem elements for the listview widget.

vini Over a year ago

Hi could you check i have changed my code but it doesn't append the li in the ul

ezanker Over a year ago

@vini, is $('#' + dropdownId) referring to an existing UL DOM element? or is it still a dropdown in your HTML markup?

vini Over a year ago

Its referring to the ul id

|

Collectives™ on Stack Overflow

How to implement jquery mobile autocomplete in dynamically created input

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related