0

I have searched a lot but didn't got any result which is satisfying, I am trying to get a div just below a text using JavaScript for my autocomplete textbox

<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!
3
  • Please check jsfiddle.net/3pNSx/53 . Are you looking for similar thing ?
    – noob
    Aug 26, 2013 at 11:34
  • actually not , i want when i enter a value in second textbox , then the div comes below second
    – bhawin
    Aug 26, 2013 at 11:40
  • can u please set up a fiddle
    – Akki619
    Aug 26, 2013 at 11:53

6 Answers 6

4

In general it is not a good idea to attach javascript events into the html. My idea is to dynamically create a div and position it just below the input field I think that the following code will work. Here is also a 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';
        }
    });
}
2
  • hy, the answer is good, but i want to know how this.suggestion works
    – bhawin
    Aug 26, 2013 at 13:02
  • this actually points to a DOM element. It's actually an object, which means that you can add a new custom property on the fly. In our case I'm creating a property suggestion, which is another dom element. Having this I'm able to check if the div is already created or not.
    – Krasimir
    Aug 26, 2013 at 13:06
1

try this :

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

try this

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

or this

function suggest(e,the)
{
    $(the).after($("#div").show('slow'));
}
3
  • nope it didn't worked, what is the div here , is it creating dynamically
    – bhawin
    Aug 26, 2013 at 11:50
  • i edit my answer, div is create static at last of input fields and it should be hide when suggest function call div will be show at next of input field which was press Aug 26, 2013 at 11:53
  • i have tried your code in jsfiddle but it was not showing the div on below respective input on keypress
    – bhawin
    Aug 26, 2013 at 12:03
0

use

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

0

I created sample here. This will be for adding div exactly below textbox.

more perfect code 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;
    }
0

using Datatable.,.,
enter image description here

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" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.