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 Commented 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
    Commented el 12 mar. 2018 a las 22:16

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.