select con opciones de muchos registros

[betodaniel61]

Buen Día:
Tengo un SELECT con 20000 registros de opciones y se me hace imposible ya que tarda mucho en cargar el HTML.
Como se podría hacerlo en otra pantalla de busqueda, ejemplo modal pasando parámetros de tabla y campos a buscar y que me retorne el ID.
Muchas Gracias por su ayuda

[Rafael]

Un select así es, con todo respeto una tontería. Nadie, nadie en el planeta, nadie va a hacer un scroll. Olvídate de que se tarde en cargar. Eso es lo de menos. La gente NO LO VA A USAR.

Busca un autocomplete, probablemente con ajax. https://www.google.com.mx/search?q=autocomplete+ajax

[Iballa]

En jQuery UI https://jqueryui.com/autocomplete/ también tienes un script de autocompletar con opciones muy interesantes,
y siendo tantas opciones creo que la mejor es la que llama a un script remoto donde estarán las diferentes opciones de autocompletado.

Saludos

[IsaBelM]

Autocomplete con javascript nativo http://www.forosdelweb.com/f179/apor...ml#post4520192

[betodaniel61]

Muchas Gracias Rafael, lo estoy cambiando por un autocompletar con jquery y php, el problema que tengo ahora es que no puedo tomar el ID que selecciono, les paso el codigo por si pueden ayudarme.


<script type="text/javascript" src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script type="text/javascript" src="plugins/jQueryUI/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Al escribr dentro del input con id="nomloc"
$('#nomloc').keypress(function(){
//Obtenemos el value del input
var nomloc = $(this).val();
var dataString = 'nomloc='+nomloc;
//Le pasamos el valor del input al ajax
$.ajax({
type: "POST",
url: "../app/Vista/autocomplete_localidades.php",
data: dataString,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$('#suggestions').fadeIn(1000).html(data);
//Al hacer click en algua de las sugerencias
$('.suggest-element a').click(function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr('id');
var idlocalidad = $(this).attr('id');
alert(idlocalidad);
//Editamos el valor del input con data de la sugerencia pulsada
$('#nomloc').val($('#'+id).attr('data'));
//Hacemos desaparecer el resto de sugerencias
$('#suggestions').fadeOut(1000);
});
}
});
});
});
</script>
</head>


<div class="form-group">
<form>
<label>Localidad</label>
<input type="text" class="form-control" id="nomloc" name="nomloc" placeholder="Localidad" value="<?php echo (isset($dato['nomloc'])?$dato['nomloc']:'') ?>" />
<div id="suggestions"></div>
</form>
</div>


<?php
//header( 'Content-type: text/html; charset=iso-8859-1' );

$conexion = mysql_connect('localhost', 'root', '') or die('No se pudo conectar: ' . mysql_error());
mysql_select_db('famularo') or die('No se pudo seleccionar la base de datos');

$search = $_POST['nomloc'];
$query = mysql_query("SELECT loc.idlocalidad id, concat(loc.nombre,', ',pro.nombre) title FROM localidades loc left join provincias pro on loc.idprovincia=pro.idprovincia WHERE loc.nombre like '" . $search . "%' ORDER BY loc.nombre DESC limit 100", $conexion);

while ($row = mysql_fetch_array($query))
{
// echo '<div class="suggest-element"><a data="'.$row['title'].'" id="nomloc'.$row['id'].'">'.utf8_encode($row['title']).'</a></div>';
echo '<div class="suggest-element"><a data="'.$row['title'].'" id="'.$row['id'].'">'.utf8_encode($row['title']).'</a></div>';
}
?>


Funciona, busco las localdiades bien pero no puedo tomar el ID, lo veo con el alert de JS pero no puedo tomarlo desde PHP.

Desde ya Muchas Gracis por su tiempo!!
Norberto