jquery-ui bootstrap 模式中文本框中的自动完成不会将单击的值填充到文本框中

Question

我的网络应用程序（rails 4 with turbolinks）使用 bootstrap 3。我使用 jquery-ui-autocomplete 来填充表单中的文本框bootstrap 模态。如果我使用键盘 select 列表中的项目，selected 项目会填充到文本框中。但是，如果我从自动完成下拉列表中单击一个项目，它不会填充到文本框中。

查看代码和脚本部分如下：

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

更新：

根据@Rooster 在下面评论中的要求，我生成了一个 bootply。

更新2:

更新了 bootply 以添加实际的 css，它在 bootply 中按预期工作 - 在 rails 中仍然不起作用。

http://www.bootply.com/vo3xGdqxTX

更新3：我从 rails 视图 css 中删除了上面所有的自动完成样式，只保留了 z-index。它仍然没有工作：（即，列表显示，但点击一个项目不会填充文本框）。

Answer 1

我认为您刚刚遇到了一个 css 问题，它既隐藏了 fiddle 中的自动完成小部件，又阻止了在您的实时代码中实际点击自动完成元素。查看此更新 fiddle：http://www.bootply.com/nRkKGhDKPo

尝试添加此 css 规则：

ul.ui-autocomplete {
    z-index:9999;
}

Answer 2

我想通了 - 问题是我在 select 处理程序中 returning 错误。我将其更改为 return true 并且有效。

$('#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
    }
  });

jquery-ui bootstrap 模式中文本框中的自动完成不会将单击的值填充到文本框中

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

css

jquery-ui

ruby-on-rails

jquery-ui-autocomplete

twitter-bootstrap

css