L'autocomplétion jquery-ui dans une zone de texte à l'intérieur d'une modale bootstrap ne remplit pas la valeur cliquée dans la zone de texte.

Question

Mon application web (rails 4 avec turbolinks) utilise bootstrap 3. J'utilise jquery-ui-autocomplete pour remplir une zone de texte dans un formulaire au sein d'une modale bootstrap. Si j'utilise le clavier pour sélectionner un élément dans la liste, l'élément sélectionné est rempli dans la zone de texte. Mais si je clique sur un élément de la liste déroulante de la complétion automatique, il ne s'affiche pas dans la zone de texte.

Voici le code de la vue et la section script :

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

Mise à jour :

Comme demandé par @Rooster dans le commentaire ci-dessous, j'ai généré un bootply.

Mise à jour2 :

J'ai mis à jour le bootply pour ajouter le css actuel, et cela fonctionne comme prévu dans le bootply - mais cela ne fonctionne toujours pas dans rails.

http://www.bootply.com/vo3xGdqxTX

Mise à jour3 : J'ai supprimé tout le style autocomplete ci-dessus de la css de la vue rails et j'ai juste gardé le z-index. Cela ne fonctionne toujours pas : (c'est-à-dire que la liste s'affiche, mais le fait de cliquer sur un élément ne remplit pas la zone de texte).

Answer 1

Je pense que vous avez juste un problème de css qui cache le widget autocomplete dans le fiddle et empêche l'élément autocomplete d'être cliqué dans votre code réel. voyez ce fiddle mis à jour : http://www.bootply.com/nRkKGhDKPo

essayez d'ajouter cette règle css :

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

Answer 2

J'ai trouvé la solution - le problème était que je renvoyais false dans le gestionnaire de sélection. Je l'ai changé pour qu'il renvoie true et ça a marché.

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