Problème recherche javascript

Bonjour,

Je souhaite faire une barre de recherche avec autocomplete

un ami m'a proposé ceci:

<html lang="fr">
<head>
  <title>recherche auto</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    var availableTags = [
      "test1",
      "test2",

    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Recherche: </label>
  <input id="tags" />
</div>

</body>
</html>

Je souhaiterais si la personne tape test1 dans l'input, qu'elle soit ensuite rediriger vers une url

on m'a dis d'utiliser header location ou top.location

il faudrait ensuite que j'intègre cet autocomplete à ma barre de recherche, en voici le code:

<div align="center"> 
<div class="widget-container widget_search">
<form method="get" id="searchform" action="recherche.php">
<div>
<label class="screen-reader-text" for="si">Search for:</label>
<input  class="input_search" type="text"  id="si" value="Recherchez votre village" onfocus="if (this.value == 'Recherchez votre village') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Recherchez votre village';}" name="si"/>
<input type="submit" id="searchsubmit" class="btn-submit" value="Submit"/>
</div>
</form>
</div>
</div>

quelqu'un pourrait me faire un exemple dans mon code que je puisse comprendre avec des lignes de commentaire si possible ?

Cordialement,