tooltips - Estilo jQuery autocompletar en un campo de entrada Bootstrap

tooltip jquery

Question

He implementado una función de autocompletado de jQuery en una entrada Bootstrap. El autocompletado de jQuery está funcionando bien, pero quiero ver los resultados como un combo y supongo que ahora está sucediendo porque estoy usando BootStrap.

Este es el campo que estoy asignando autocompletar:

<div class="form-group">
  <label>Employee</label>
  <input class="form-control" name="txtEmployee" placeholder="Trabajador">
</div>

$(this).autocomplete({

  source: function(request, response) {
    $.ajax({
      url: ''@Url.Content("~/Employee/SearchEmployee")/'',
      type: ''POST'',
      contentType: ''application/json'',
      dataType: "json",
      data: JSON.stringify({
          employerId: 1,
          searchStr: me.val()
      }),
      success: function(data) {
        if (data.success) {

          response($.map(data.data, function(item) {

            return {
              label: "(" + item.EmployeeNumber + ") " + 
                           item.FirstName + " " + 
                           item.MothersLast + ", " + 
                           item.FathersLast,
              employeeId: item.EmployeeId
            }
          }));
        } 
      }
    });
  },
  minLength: 3
});

Los resultados se muestran pero así:

¿Cómo puedo personalizar los resultados con Bootstrap para poder verlos como una lista desplegable?

Answer 1

Encontré el siguiente css para diseñar una entrada de Bootstrap para un autocompletado de jquery:

https://gist.github.com/daz/2168334#file-style-scss

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    padding: 4px 0;
    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-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-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }

Answer 2

No sé si lo arreglaste, pero tuve el mismo problema, finalmente fue una tontería, tuve:

<script src="jquery-ui/jquery-ui.min.css" rel="stylesheet">

pero debería ser:

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">

Simplemente cambie <scrip> a <link> y src a href

Answer 3

Prueba esto ( demo ):

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Answer 4

Si está utilizando jQuery-UI, debe incluir el paquete jQuery UI CSS, de lo contrario, los componentes de la interfaz de usuario no saben cómo usar el estilo.

Si no te gustan los estilos de la interfaz de usuario de jQuery, tendrás que recrear todos los estilos que de otra forma se habrían aplicado.

Aquí hay un ejemplo y algunas posibles correcciones.

Ejemplo mínimo, completo y verificable (es decir, roto)

Aquí hay una demostración en Stack Snippets sin jquery-ui.css (no funciona)

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">

  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group">
    <label >Another Field</label>
    <input class="form-control">
  </div>

</div>

Solución # 1 - jQuery-UI Style

Simplemente incluya jquery-ui.css y todo debería funcionar bien con las últimas versiones compatibles de jquery.

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">
  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group">
    <label >Another Field</label>
    <input class="form-control">
  </div>
</div>

Arreglo # 2 - Tema Bootstrap

Hay un proyecto que creó un tema Bootstrap-esque para los componentes de jQuery-UI llamado jquery‑ui‑bootstrap . Simplemente toma la hoja de estilo desde allí y deberías estar listo.

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">
  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group">
    <label >Another Field</label>
    <input class="form-control">
  </div>
</div>

Arreglo # 3 - CSS manual

Si solo necesita el widget de Autocompletar de la biblioteca de jQuery-UI, debe comenzar haciendo una compilación personalizada para no extraer recursos que no esté usando.

Después de eso, tendrás que peinarlo tú mismo. Solo mire algunos de los otros estilos que se aplican a autocomplete.css y theme.css de theme.css para averiguar qué estilos necesitará reemplazar manualmente.

Puedes usar los dropdowns.less de bootstrap, sin inspiración.

Aquí hay una muestra de CSS que encaja bastante bien con el tema predeterminado de Bootstrap:

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    -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);
}
.ui-autocomplete > li {
  padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
  background-color: #DDD;
}
.ui-helper-hidden-accessible {
  display: none;
}

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc
    -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);
}
.ui-autocomplete > li {
  padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
  background-color: #DDD;
}
.ui-helper-hidden-accessible {
  display: none;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">
  <div class="form-group ui-widget">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group ui-widget">
    <label >Another Field</label>
    <input class="form-control" />
  </div>
</div>

Sugerencia : dado que el menú desplegable se oculta cada vez que va a inspeccionar el elemento (es decir, cuando la entrada pierde el foco), para facilitar la depuración del estilo, busque el control con .ui-autocomplete y elimine la display: none; .