在文本框下方放置一个div

Question

我搜索了很多但没有得到满意的结果， 我正在尝试使用JavaScript为我的自动填充文本框

在文本下方获取div

<input type="text" id="one" onkeyup="suggest(event,this)" />
<p>
<input type="text" id="two" onkeyup="suggest(event,this)" />
<p>
<input type="text" id="two" onkeyup="suggest(event,this)" />

javascript:
function suggest(e,the)
{
    //here i want to create a div and place just below the textbox on which the keyispressed
}

any help!

Answer 1

通常，将javascript事件附加到html中并不是一个好主意。我的想法是动态创建一个div并将其放置在输入字段的下方我认为以下代码将起作用。这里也是一个jsfiddle http://jsfiddle.net/krasimir/qCXPu/3/

<div class="wrapper">
<input type="text" id="one" class="suggest" />
<p>some text</p>
<input type="text" id="two" class="suggest" />
<p>some text</p>
<input type="text" id="three" class="suggest" />
</div>

JavaScript的：

var inputs = document.querySelectorAll('.suggest');
for(var i=0; field=inputs[i]; i++) {
    field.addEventListener('keyup', function(event) {
        var text = 'You typed: ' + this.value;

        if(!this.suggestion) {
            var rect = this.getBoundingClientRect();
            var left = rect.left;
            var top = rect.bottom;
            this.suggestion = document.createElement('DIV');            
            this.suggestion.innerHTML = text;
            this.suggestion.setAttribute('style', 'background: #B0B0B0; padding: 6px; position: absolute; top: ' + top + 'px; left: ' + left + 'px;');
            this.parentNode.appendChild(this.suggestion);
        } else {
            this.suggestion.innerHTML = text;
            this.suggestion.style.display = 'block';
        }        

    });
    field.addEventListener('blur', function(event) {
        if(this.suggestion) {
            this.suggestion.style.display = 'none';
        }
    });
}

Answer 2

试试这个：

    <input type="text" id="one" onkeyup="suggest(this)" />
    <p>
    <input type="text" id="two" onkeyup="suggest(this)" />
    <p>
    <input type="text" id="two" onkeyup="suggest(this)" />

javascript：

function suggest(obj)
    {
        $('<div><p>inserted div</p><div>').insertAfter(obj);
    }

Answer 3

试试这个

function suggest(e,the)
{
    $(e).after($("#div").show('slow'));
}

或者

function suggest(e,the)
{
    $(the).after($("#div").show('slow'));
}

Answer 4

使用

function suggest(e,the) { $(the).after("<div>Some content</div>"); }

Answer 5

我创建了示例here。这将用于在文本框下方添加div。

更完美的代码here

#bottom-div {
    z-index: 999;
    position: absolute;
    min-width: 290px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    height: 80px;
    cursor: pointer;
    display: none;
    border-top-color: #000;
}

    #bottom-div > div {
        padding-bottom: 5px;
    }

Answer 6

使用Datatable。，。，
   

var HG_ServiceUrl = HG_fnCallWebService, HG_LoadingImg = HG_LoadingText, HG_bg = '#D9E3D2', HG_callBack = HG_helpGridCallback;
$(document).ready(function () {
    var inputs = document.querySelectorAll('.helpgrid');
    for (var i = 0; field = inputs[i]; i++) {
        HG_createHelpGridEvent(field);
    }
});
function HG_loadHelpGrid(param) {
    $('#' + param.tblId + ' thead th').each(function () {
        $(this).css("padding-left", "0px");
        $(this).css("padding-right", "5px");
        var title = $(this).text();
        var append = '<label style="float:left">' + title + '</label>';
        if (param.cussrch != "no") {
            append = append + '<br /><input style="float:left;width:120px;" type="text" />';
        }
        $(this).html(append);
    });
    $('#' + param.tblId + ' tbody tr td').each(function () {
        $(this).css('padding', '5px');
        $(this).css('width', $(this).css('width'));
        $(this).css('overflow', 'hidden');
        $(this).css('max-width', '100px');
        $(this).css('white-space', 'nowrap');
        $(this).css('text-overflow', 'ellipsis');
        $(this).mouseout(function () {
            $(this).attr('title', "");
        });
        $(this).mouseenter(function () {
            $(this).attr('title', $(this).text());
        });
    });
    if (param.click != 'no') {
        $('#' + param.tblId + ' tbody tr').css('cursor', 'pointer');
        $('#' + param.tblId + ' tbody').on('click', 'tr', function (event) {
            HG_sendToHelpGridCallback(this);
        });
    }else {
        $('#' + param.tblId + ' tbody').on('dblclick', 'tr', function (event) {
            HG_sendToHelpGridCallback(this);
        });
    }
    var table = $('#' + param.tblId).DataTable({
        "scrollY": "200px",
        "scrollCollapse": true,
        "paging": false,
        "ordering": false,
        "info": false,
        "columnDefs": param.colDef,
        "createdRow": function (row, data, rowIndex) {
            $(row).attr('tblid', param.tblId);
            $(row).attr('outputid', param.outputId);
            $(row).attr('selcolumn', param.selcolumn);
            $(row).attr('tblCols', param.tblCols);
            $(row).attr('assigntotxtbox', param.assignToTxtBox);
        }
    });
    table.columns().every(function () {
        var col = this;
        $('input', this.header()).on('keyup change', function () {
            if (col.search() !== this.value) {
                col.search(this.value).draw();
            }
        });
    });
    try {
        if (param.defsrch == "no") {
            $("#" + param.tblId + "_filter").css("display", "none");
            if (param.cussrch != "no") {
                $($('thead')[0]).find('tr th:first input[type="text"]').focus();
            }
        } else {
            $("#" + param.tblId + "_filter input[type='search']").focus();
        }
    } catch (ex) { };
}

function HG_createHelpGridEvent(field) {
    $(field).keyup(function (event) {
        if (event.keyCode == 8 && $(this).val() == '') {
            if (this.suggestion) {
                this.suggestion.style.display = 'none';
            }
        } else {
            if ($(this).val() != '') {
                this.suggestion.style.display = 'block';
            }
        }
    });

    $(field).mouseup(function (event) {
        HG_createTxtboxDiv(this);
    });

    $(field).focus(function (event) {
        HG_createTxtboxDiv(this);
    });
}

function HG_createTxtboxDiv(sender) {
    var inp = document.querySelectorAll('.helpgrid');
    for (var j = 0; field = inp[j]; j++) {
        if (inp[j].suggestion != undefined) {
            inp[j].suggestion.style.display = 'none';
        }
    }
    if (!sender.suggestion) {
        var rect = sender.getBoundingClientRect();
        var left = rect.left;
        var top = rect.bottom;
        sender.suggestion = document.createElement('DIV');
        sender.suggestion.innerHTML = HG_LoadingImg();
        sender.suggestion.setAttribute('style', 'background: ' + HG_bg + ' ; padding: 6px; position: absolute; top: ' + top + 'px; left: ' + left + 'px;');
        sender.parentNode.appendChild(sender.suggestion);
        HG_ServiceUrl(sender, HG_webServiceCallback);
    } else {
        sender.suggestion.style.display = 'block';
    }
}

function HG_webServiceCallback(sender, data) {
    var tblCol = '', colDef = [], table = '<table id="' + sender.getAttribute("tblid") + '" class="cell-border" width="50%" cellspacing="0" >', thead = '<thead><tr>', tbody = '<tbody>';
    for (var i = 0; i < data.length; i++) {
        var cnt = 0;
        tbody = tbody + '<tr>';
        $.each(data[i], function (index, value) {
            if (i == 0) {
                tblCol = tblCol + index + ",";
                thead = thead + '<th>' + index + '</th>';
                if (index.toLowerCase().indexOf("hdn") != -1) {
                    colDef.push({ "targets": [cnt], "visible": false, "searchable": false });
                }
                cnt = cnt + 1;
            }
            tbody = tbody + '<td>' + value + '</td>';
        });
        tbody = tbody + '</tr>';
    }
    thead = thead + "</thead>";
    tbody = tbody + '</tbody>';
    table = table + thead + tbody + '</table>';
    tblCol = tblCol.replace(/^,|,$/g, '');
    var opcol = (sender.getAttribute("appcolumn") != undefined || sender.getAttribute("appcolumn") != null || sender.getAttribute("appcolumn") != "") ? sender.getAttribute("appcolumn") : sender.getAttribute("id");
    var sglclk = sender.getAttribute("sglclk") == 'no' ? 'no' : 'yes';
    var opapp = sender.getAttribute("opapp") == 'no' ? 'no' : 'yes';
    var defsrch = sender.getAttribute("defsrch") == 'no' ? 'no' : 'yes';
    var cussrch = sender.getAttribute("cussrch") == 'no' ? 'no' : 'yes';
    sender.suggestion.innerHTML = table;
    var param = { tblId: sender.getAttribute("tblid"), outputId: opcol, selcolumn: sender.getAttribute("selcolumn"), assignToTxtBox: opapp, click: sglclk, defsrch: defsrch, cussrch: cussrch, colDef: colDef, tblCols: tblCol };
    HG_loadHelpGrid(param);
}

function HG_sendToHelpGridCallback(sender) {
    document.getElementById($(sender).attr("outputid").split(',')[0]).suggestion.style.display = 'none';
    var table = $('#' + $(sender).attr("tblid")).DataTable();
    var rowresult = {};
    var col = $(sender).attr("tblCols").split(',');
    for (var i = 0; i < col.length; i++) {
        rowresult[col[i].toLowerCase()] = table.row(sender).data()[i];
    }
    if ($(sender).attr("assigntotxtbox") == 'yes') {
        var appendoutputid = $(sender).attr("outputid").split(',');
        var selectedColumn = $(sender).attr("selcolumn").split(',');
        for (var i = 0; i < appendoutputid.length; i++) {
            $('#' + appendoutputid[i]).attr("hdnfk", rowresult["hdnfk"]);
            $('#' + appendoutputid[i]).val(rowresult[selectedColumn[i].toLowerCase()]);
        }
    } else {
        HG_helpGridCallback($(sender).attr("outputid").split(',')[0], $(sender).attr("tblid"), rowresult);
    }
    return false;
}


> Textbox Attribute:
*class="helpgrid"  ---->  Draw HelpGrid  
*tblid="example1"   ---->  Draw HelpGrid using with table id
*selcolumn="office,age"  ----> HelpGrid Columns values
appcolumn="test,test1"   ----> selected values append more then two textbox.(Default it takes Textbox Id)
opapp="yes"  ---->   HelpGrid click append to corresponding textbox (Default "yes")
"hdnfk" ----> set;get; row reference.
callback -----> function HG_helpGridCallback(outId, tblId, rowdata)
defsrch & cussrch   -----> default "yes"
HG_webServiceCallback(sender, data)  ---> result callback
HG_fnCallWebService(sender, callback)  ---> web service
HG_LoadingText()  ---> loading waiting gif.

> Sample : <input type="text" id="test1" class="helpgrid" tblid="example2" selcolumn="loc cd" appcolumn="test1" cussrch="no" />