Q:

jquery-ui autocomplete in textbox within a bootstrap modal does not populate clicked value into textbox

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. 
Here is the view code and the script section:
<div>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#item_modal">
      Pick Item...
  </button>
</div>

 <div class="modal fade" id="item_modal" tabindex="-1" role="dialog" aria-labelledby="item_modal_label">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="item_modal_label">Pick Item...</h4>
    </div>
    <%= form_tag '/items/do_something', method: :post do %>
      <div class="modal-body"  data-no-turbolink>
        <div>Start typing the name of the item</div> 
        <%= text_field_tag :source_item, nil, id: 'item-text-box', class: 'form-control' %>
        <%= hidden_field_tag :source_item_id %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <%= submit_tag "Submit" class: 'btn btn-primary' %>
      </div>
    <% end %>
  </div>
</div>

<script>
  var src_items = [];
  <% get_completion_items.each do |ci| %>
  src_items.push(
    {
      label: "<%= raw(ci.full_path) %>",
      id: "<%= ci.id %>"
    }
  );
  <% end %>
  $('#item-text-box').autocomplete({
    minLength: 0,
    source: src_items,
    select: function( event, ui ) {
      $( "#source_item_id" ).val( ui.item.id );
      return false;
    }
  });
  </script>

css
.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>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;
}

Update: 
As requested by @Rooster in the comment below, I generated a bootply. 
Update2:
Updated the bootply to add the actual css, and it works as expected in the bootply - still doesn't work in rails. 
http://www.bootply.com/vo3xGdqxTX
Update3:
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).

A:

I figured it out - the problem was that I was returning false in the select handler. I changed it to return true and it worked. 
$('#item-text-box').autocomplete({
    minLength: 0,
    source: src_items,
    select: function( event, ui ) {
      $( "#source_item_id" ).val( ui.item.id );
      return true; // this was false before, which caused the problem
    }
  });

