如何在文本框中放置一个div答案

【问题标题】：How to put a div inside a textbox如何在文本框中放置一个div
【发布时间】：2012-02-04 01:30:25
【问题描述】：

在 SO 上提出问题的一部分是输入标签。当您键入一个标签并单击它时，一个 div 会进入文本框。（至少这就是我认为正在发生的事情）。我怎样才能在这样的文本框中放置一个 div？目前我只能使用以下方法将文本框的值更改为下拉项：

查询：

$('.item_display').click(function(){
$('#Result').css("display" , "none");
var item = $(this).text();

$('#userInput').val(item);
});

HTML：

<input type='text' id='userInput' autocomplete='off' /> 
<div id='Results'></div>  //this is the dropdown menu where .item_display appears

【问题讨论】：

看看Chosen插件。真正发生的是有一个容器 div 看起来像一个文本框左对齐的文本框。添加项目时，您正在向文本框左侧添加另一个元素，并且它会滑过。 harvesthq.github.com/chosen
它不是一个文本框，它只是一个 <div> 样式看起来像一个文本框。
使用 Firebug 或 Chrome 控制台来检查，不是你想的那样。
仅供参考：This 似乎是（压缩的）源。
简单的方法是使用插件而不是重新发明错误

标签： jquery css html

【解决方案1】：

插件选择是一个很好的例子来说明如何做到这一点。这个想法似乎是一个文本框，实际上不是。容器 DIV 跨越所需元素的宽度。一个文本框位于左侧，横跨您所在区域的宽度。当您键入和添加元素时，新的 div 会出现在文本框的左侧，推动文本框向右并重新缩放宽度。在各种插件中可能有可能实现这一点，但我已经与 Chosen 合作过，

http://harvesthq.github.com/chosen/

【讨论】：