地方略低於

我尋覓了很多，但並未有任何的結果是令人滿意的一個文本框一個div，我試圖讓剛剛低於使用JavaScript爲我自動完成文本框文本股利地方略低於

<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!

來源

2013-08-26 bhawin

請檢查http://jsfiddle.net/3pNSx/53/。你在尋找類似的東西嗎？ – noob

實際上不是，我想當我在第二個文本框中輸入一個值，然後div下面第二個 – bhawin

可以請你設置一個小提琴 – Akki619

一般來說，是不是一個好主意將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'; 
     } 
    }); 
}

來源

2013-08-26 11:59:03 Krasimir

hy的相應輸入，答案很好，但是我想知道this.suggestion是如何工作的 – bhawin

*這*實際上指向了一個DOM元素。它實際上是一個對象，這意味着您可以即時添加新的自定義屬性。在我們的例子中，我創建了一個屬性*建議*，這是另一個dom元素。有了這個我能夠檢查div是否已經創建或沒有。 – Krasimir

試試這個

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

或本

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

來源

2013-08-26 11:45:31

nope它沒有工作，什麼是這裏的div，它是動態創建 – bhawin

我編輯我的答案，div是創建靜態在最後的輸入字段，它應該隱藏時，建議函數調用div將顯示在輸入字段的下一個是按 –

我試過你的代碼在jsfiddle，但它沒有顯示下面的div對於按鍵 – bhawin

試試這個：

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

來源

2013-08-26 12:02:42

使用

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

來源

2013-08-26 12:11:52

我創建了樣本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; 
    }

來源

2013-12-03 08:00:53 Kurkula

使用數據表。，。，

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

來源

2016-06-28 09:17:15 RandyMohan

回答

相關問題