如何將下面的div添加到輸入文本中？

我想開發簡單的自動完成功能，我對JQuery自動完成插件不感興趣。如何將下面的div添加到輸入文本中？

我只是想在輸入文本的正下方添加一個下劃線，此代碼假設工作，我做錯了什麼？有什麼辦法來實現這一目標？

這裏是代碼，如果你不whant打開小提琴：

$("#txtSearch").keypress(function (e) { 
    if ($("#txtSearch").val().length >= 2) { 
     var pos = $("#txtSearch").position(); 
     $('<div />', { 
      'html': "xxxxxxxxx xx x" 
     }).css({ 
      top: pos.top, 
      left: pos.left, 
      width: '300px', 
      position: 'absolute', 
      'background-color': 'Yellow' 
     }).appendTo($("#txtSearch")); 
    } 
});

來源

2013-02-13 RollRoll

裏面的事件處理程序，您可以用'爲$（本）'代替（連連）再次回到了DOM找到的元素。 – Pointy 2013-02-13 20:35:57

嘗試下面的代碼，

$("#txtSearch").keypress(function (e) { 
    if ($("#txtSearch").val().length >= 2) { 
     var pos = $("#txtSearch").position(); 
     $('<div />') 
     .html("xxxxxxxxx xx x") 
     .css({ 
     top: pos.top + $("#txtSearch").height() + 1, 
     left: pos.left, 
     width: '300px', 
     position: 'absolute', 
     'background-color': 'Yellow' 
     }).insertAfter($("#txtSearch")); 
    } 
});

DEMO：http://jsfiddle.net/uZF5g/1/

來源

2013-02-13 20:33:36

$("#txtSearch").keypress(function (e) 
{ 
    if ($("#txtSearch").val().length >= 2) 
    { 
    $('#txtSearch').after('<div id="someID">'); 
    $('#someID').html('xxxxxxx xx x') 
     .css({ 
      top: pos.top, 
      left: pos.left, 
      width: '300px', 
      position: 'absolute', 
      'background-color': 'Yellow' 
      }) 
     .appendTo($("#txtSearch")); 
    } 
});

來源

2013-02-13 20:33:50 chris

您不能追加到（.appendTo）空的內容模型元素。改用.insertAfter（或.insertBefore）。您可能還希望至少將top添加到輸入的高度。

http://jsfiddle.net/uZF5g/3/

來源

2013-02-13 20:35:37

如何將下面的div添加到輸入文本中？

回答

相關問題