Question

我的文本框和数据是在javascript中动态生成的，我如何在数据上应用jquery移动自动完成

    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);
    });
}

我现在正在使用Drop down但想要使用ListView自动完成但无法找到实现它的方法

更新：

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>';

}

Answer 1

当您将动态项添加到自动完成列表视图时，您需要为listview小部件和可过滤小部件调用refresh：

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");

这是一个有效的 DEMO

如何在动态创建的输入中实现jquery移动自动完成

1 个答案: