web-dev-qa-db-fra.com

JQuery autocomplete où les résultats sont des liens

J'essaie de créer une boîte de jackery autocomplete où les mots étant suggéré pour AUTOMPLETE sont des liens (semblables à ce qui se passe sur Facebook ou Quora).

Fondamentalement, je veux que les résultats autocompéqués tombent en panne et que je veux que les gens puissent cliquer sur eux et être navigués sur une page différente. Voici le code que j'utilise actuellement

<!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>
htmljqueryautocompletehyperlink
28
Spencer

C'est simple. Changez votre source en un tableau d'objets, tels que:

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

Il suffit d'utiliser la méthode de sélection pour rediriger vers la "valeur", par exemple:

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