title: Auto width drop down menu conbine with input text
body: <p>I have an input text combined with a drop down menu of Bootstrap. I used input-prepend as the following code:</p>
  
  <pre><code>&lt;div class="input-prepend"&gt;
  &lt;div class="btn-group"&gt;
      &lt;button id="btn-cat" class="btn" tabindex="-1" name="category"&gt;All&lt;/button&gt;
      &lt;button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"&gt; &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" id="category-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Computers&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cell Phones &amp; Accessories&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Magazine Subscriptions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Video Games&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sports &amp; Outdoors&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;input type="text"&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please refer to a demo here:
  <a href="http://jsfiddle.net/LCdvQ/1/" rel="nofollow">http://jsfiddle.net/LCdvQ/1/</a></p>
  
  <p>The problem is when I select a long menu item, input text will be moved to the right. What I want is an effect like the search box at amazon.com.</p>