title: jquery-ui autocomplete in textbox within a bootstrap modal does not populate clicked value into textbox
body: <p>My web app (rails 4 with turbolinks) uses bootstrap 3. I use jquery-ui-autocomplete to populate a textbox in a form within a bootstrap modal. If I use the keyboard to select an item from the list, the selected item gets populated in the textbox. But if I click on an item from the autocomplete dropdown, it does not get populated in the textbox. </p>
  
  <p>Here is the view code and the script section:</p>
  
  <pre><code>&lt;div&gt;
    &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#item_modal"&gt;
        Pick Item...
    &lt;/button&gt;
  &lt;/div&gt;
  
   &lt;div class="modal fade" id="item_modal" tabindex="-1" role="dialog" aria-labelledby="item_modal_label"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title" id="item_modal_label"&gt;Pick Item...&lt;/h4&gt;
      &lt;/div&gt;
      &lt;%= form_tag '/items/do_something', method: :post do %&gt;
        &lt;div class="modal-body"  data-no-turbolink&gt;
          &lt;div&gt;Start typing the name of the item&lt;/div&gt; 
          &lt;%= text_field_tag :source_item, nil, id: 'item-text-box', class: 'form-control' %&gt;
          &lt;%= hidden_field_tag :source_item_id %&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;%= submit_tag "Submit" class: 'btn btn-primary' %&gt;
        &lt;/div&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
    var src_items = [];
    &lt;% get_completion_items.each do |ci| %&gt;
    src_items.push(
      {
        label: "&lt;%= raw(ci.full_path) %&gt;",
        id: "&lt;%= ci.id %&gt;"
      }
    );
    &lt;% end %&gt;
    $('#item-text-box').autocomplete({
      minLength: 0,
      source: src_items,
      select: function( event, ui ) {
        $( "#source_item_id" ).val( ui.item.id );
        return false;
      }
    });
    &lt;/script&gt;
  </code></pre>
  
  <h1>css</h1>
  
  <pre><code>.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
  
    padding: 6px 12px;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0,0,0,0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;*border-right-width:2px;*border-bottom-width:2px
  }
  .ui-autocomplete .ui-menu-item&gt;a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap
  }
  
  .ui-widget-content li{
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }
  
  .ui-widget-content .ui-state-focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #ffcc00;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }
  </code></pre>
  
  <p><strong>Update:</strong> </p>
  
  <p>As requested by @Rooster in the comment below, I generated a bootply. </p>
  
  <p><strong>Update2</strong>:</p>
  
  <p>Updated the bootply to add the actual css, and it works as expected in the bootply - still doesn't work in rails. </p>
  
  <p><a href="http://www.bootply.com/vo3xGdqxTX" rel="nofollow">http://www.bootply.com/vo3xGdqxTX</a></p>
  
  <p><strong>Update3</strong>:
  I removed all the autocomplete styling above from the rails view css and just kept the z-index. It still didn't work: (i.e, list shows, but clicking on an item does not fill the textbox).</p>