web-dev-qa-db-ja.com

結果がリンクであるjQueryオートコンプリート

私は、autcompleteに対して提案されている単語がリンクであるjQueryオートコンプリートボックスを作成しようとしています（FacebookまたはQuoraで発生するものと同様）。

基本的に、オートコンプリートの結果をドロップダウンして、人々がクリックして別のページに移動できるようにしたいです。これが私が現在使用しているコードです

<!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

これは簡単です。ソースを次のようなオブジェクトの配列に変更します。

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

Selectメソッドを使用して「値」にリダイレクトするだけです。例：

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