0

Estoy teniendo problemas a la hora de implementar el Autocomplete, Como pueden observar en la imagen el diseño del resultado no aparece donde tendría que aparecer en este caso en el input que se muestra

Adjunto mi codigo HTML y jquery

introducir la descripción de la imagen aquí

<link rel="stylesheet" href="autocomplete/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">        
<link rel="stylesheet" type="text/css" href="autocomplete/jquery.autocomplete.css"/>  
<script src="jquery/jquery-1.11.1.min.js"></script> 
<script src="autocomplete/jquery.autocomplete.js"></script>
<script src="autocomplete/jquery-ui.min.js"></script>            
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>

<div class="col-sm-12">
    <input type="hidden" id="numero_unico"> 
    <input type="text" id="nombre_completo"
           class="form-control text-center"
           placeholder="INGRESE SU NOMBRE COMPLETO" value="">
    <span class="help-block"></span>
    <p class="notificacion"></p>
</div>

El Jquery :

$(function () {
    $("#nombre_completo").autocomplete({
        source: 'php/cliente_like.php',
        minLength: 1,
        width: 460,
        matchContains: true,
        selectFirst: false
    });
});
2
  • ¿Podrías crear un fragmento de código (o jsfiddle) para replicar el error?
    – Gerry
    Commented el 1 jun. 2017 a las 22:48
  • 1
    La pregunta está etiquetada con CSS, el problema podría ser posicionamiento en CSS... pero no se incluye ni una línea de CSS en la pregunta. Por favor, añade el CSS relevante y, si es posible, crea un ejemplo mínimo verificable
    – Alvaro Montoro
    Commented el 2 jun. 2017 a las 4:27

1 respuesta 1

0

Al elemento padre del input tiene que tener una posición 'relative'. En este caso quedaría así.

 div.col-sm-12 {
   position: relative;
 }

y el elemento HTML donde se va a mostrar los resultados del autocomplete tiene que tener posición absoluta. Quedaría así.

   div.autocomplete {
     position: absolute;
     /* En cuanto a la altura pues pones lo que quieras*/
    top: 0;
     left: 0;
   }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.