1

Quisiera saber cómo crear un autocomplete en el placeholder de un input, en mi ejemplo solo muestra los datos y autocompleta pero quisiera que esos mismos datos se muestre en el placeholder. Cómo se muestra en la imagen

eror

Este es mi código

    function Datas() {
    $.ajax({
        url: "Datas",
        dataType: "JSON",
        success: function (data) {
            console.log(data);
            var Datasarray = [];
            for (var i = 0; i < data.length; i++) {
                Datasarray .push(data[i].LockNumber)
            }

            $("input#filterData").autocomplete(
                {
                    source: Datasarray ,
                    selectFirst: true,
                    minLength: 3 
                }


            );


        }
    })
}



 <div class="input-group col-lg-4" style="height:50%;">
        <input name="filterData" type="text" id="filterData" class="form-control input-primary" placeholder="Buscar Datos" />

        <span class="input-group-btn">
            <button class="btn btn-info" type="submit" id="filter" >Buscar</button>
        </span>
    </div>
1
  • Yo creería que no es un placeholder, más bien debe ser un elemento que cargue ese texto temporalmente, y ese elemento se va hacia el fondo del input el 12 mar. 2018 a las 21:44

1 respuesta 1

0

Puedes trabajarlos en de esta manera. Donde el resultado del input coincidan con el diccionario de tu ajax. No estoy seguro si tu ajax tambien será ejecutado en los eventos del input.

//Tu resultado del ajax
var names = [
  'John',
  'Miguel',
  'Hanna',
  'Pedro',
  'Alfredo',
  'Aaron'
];


var name = '';
$('#input').keyup(function(e) {
  var val = $(this).val();
  
  if(val == '') {
    $('#complete').text('');
    return;
  }

  if (e.which === 37 || e.which === 13) {
    e.preventDefault();
    $('#input').val(name);
    $('#complete').text('');
    return;
  }
  
  var find = false;
  for (var i = 0; i < names.length; i++) {
    name = names[i];
    if(name.indexOf(val) === 0) {
      find = true;
      break;
    } else {
      name = '';
    }
  }
  
  if(find === true) {
    $('#complete').text(name);
  } else {
    $('#complete').text('');
  }
})
body {
  direction: ltr;
  text-align: left;
}
body,
input,
textarea {
  font: 14px Tahoma, Verdana, Arial, sans-serif;
}
#container,
#input,
#complete{
  width: 512px;
  height: 32px;
  line-height: 32px;
  margin: 0 auto;
}
#container {
  position: relative;
}
#input,
#complete{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 8px;
  border: 2px solid #ddd;
  cursor: text;
}
#input:focus,
#complete:focus{
  outline: none;
  border-color: #aaa;
}
#input {
  color: #333;
  background-color: transparent;
}
#complete {
  color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="complete"></div>
  <input type="text" id="input" placeholder="Escriba estos nombres: John, Mike, Miguel, Hanna, Pedro, Alfredo, Aaron">
</div>

1
  • ya había revisado ese ejemplo pero no me funciona, por los datos del Ajax.
    – Daniel
    el 12 mar. 2018 a las 22:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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