Buscador que sugiere opciones

sjj · #1 (**permalink**) 02/07/2012, 13:42

Estoy intentando armar una especie de buscador de ciudades en la cual a medida que voy escribiendo me sugiera cuáles son las que están disponibles. Algo similar a lo que hace Google cuando empezás a buscar. La información de las ciudades podría tenerlas en una base de datos o tipearlas en un script, es igual para mí, lo que sea más conveniente. Son alrededor de 60 ciudades.

Encontré esto buscando un poco pero no me funciona. No termino de comprender que es lo que estoy haciendo mal aunque creo que es la llamada al script:

Código HTML:

<script>
	$(function() {
		var availableTags = [
			"BahíaBlanca",
			"Escobar",
			"LaPlata",
			"Lobos",
			"MarDelPlata"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>


	
<div class="lista">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags">
</div>

</div>

Aclaro que no es un código realizado por mí, y no termino de comprenderlo. Muchas gracias.

IsaBelM · #2 (**permalink**) 02/07/2012, 13:55

lee este tema

alexg88 · #3 (**permalink**) 02/07/2012, 14:26

Buenas,

El código que estás usando requiere de dos librerias para funcionar, la primera JQuery (http://code.jquery.com/jquery-1.7.2.min.js) y la segunda JQueryUI (http://jqueryui.com/download)

Una vez las tengas bajadas, sólo tienes que añadirlas.

Código HTML:

Ver original<script type="text/javascript" src="jquery-1.7.2.min.js" />

sjj · #4 (**permalink**) 02/07/2012, 14:50

Gracias. Lo que necesito es algo similar a eso. Según se ve las opciones en ese script salen debajo del cuadro de texto y cuando uno las selecciona intentan enlazar a otra página (por el evento onkeyup="search(this.value)). Lo que yo quiero es que se carguen en el campo de texto porque no es un valor para enlazar sino para cargar en un formulario y enviarlo junto a otros datos.

Código HTML:

<head>
<script type="text/javascript">
var n = 0;
/**
 * var arr[n++] = new Array('name', 'ip');
 */
var arr = new Array();
arr[n++] = new Array('Buenos Aires');
arr[n++] = new Array('Chubut');
arr[n++] = new Array('Mendoza');
 
function search(value){
    if(value == ""){
        document.getElementById('items').innerHTML = '';
        return false;
    }
 
    var nn = 0;
    var found = new Array();
    var str = '';
    var patt = new RegExp(value, "gi");
 
    for(var i = 0; i < arr.length; i++){
        if(patt.test(arr[i][0])){
            document.getElementById('items').innerHTML += arr[i][0] + ' --- ' + patt.test(arr[i][0]) + '<br />';
            found[nn++] = arr[i];
        }
    }
 
    for(var i = 0; i < found.length; i++){
        str += '<a href="http://' + found[i][1] + '">' + found[i][0] + '</a><br />';
    }
 
    document.getElementById('items').innerHTML = str;
}
</script>
</head>
<body>
 
<form action="index.html" onsubmit="return false"><input type="text" name="s" onkeyup="search(this.value);" /></form>
 
<div id="items"></div>
 
</body>

Muchas gracias.

IsaBelM · #5 (**permalink**) 02/07/2012, 14:58

un control, un div, qué mas da??

te lo doy hecho papilla

Cita:

document.getElementById('items').innerHTML

lo cambias por

Cita:

document.getElementById('items').value

siempre teniendo en cuenta que puede imprimirse mas de un valor