2010-12-27 9 views
25

Estoy tratando de crear un cuadro de Autocompletar JQuery donde las palabras sugeridas para autocompletar son enlaces (similar a lo que sucede en Facebook o Quora).JQuery Autocompletar Donde están los resultados

Básicamente, quiero que los resultados de autocompletar se descuelguen y quiero que las personas puedan hacer clic en ellos y ser navegadas a una página diferente. Aquí está el código que estoy usando actualmente

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
    source: ["Spencer Kline", "Test Test Test Test Test Test Test Test Test", "php", "coldfusion", "javascript", "asp", "ruby"] 
}); 
    }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 

<input id="autocomplete" /> 

</body> 
</html> 

Respuesta

60

Esto es simple. Cambiar la fuente a un grupo de objetos, tales como:

var source = [ { value: "www.foo.com", 
       label: "Spencer Kline" 
       }, 
       { value: "www.example.com", 
       label: "James Bond" 
       }, 
       ... 
      ]; 

El sólo tiene que utilizar el método de selección para redirigir al 'valor', por ejemplo:

$(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
     source: source, 
     select: function(event, ui) { 
      window.location.href = ui.item.value; 
     } 
    }); 
}); 
+0

Soy nuevo en jQuery, donde habría de hacerlo colocar la instrucción de redirección en el código? – Spencer

+0

@Spencer - Acabo de agregar un violín. Eso debería dejarlo en claro. – karim79

+0

Gracias Realmente lo aprecio. Sin embargo, soy tan novato que no puedo hacer que funcione. Coloco las cosas de JQuery en el y las cosas HTML en el . ¿Hay algo más que deba hacer? – Spencer

Cuestiones relacionadas