Autocomplete & jquery

Bonjour, j'essaye de créer un controle qui permet de faire un autocomplete (style google), je sais bien que ce genre de contrôle existe déjà, mais c'est à titre d'exercice :),
bon j'arrive à afficher une liste de proposition et sélectionner un résultat, mais je voudrais ajouter la navigation dans la liste avec le clavier (style google toujours).
Je suis bloqué, merci de me donner des issus :)

code aspx

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    <script type="text/javascript">
        $(document).ready(function () {
            //Lors de l'écriture dans le text box on récupère la liste des noms depuis la bdd            
            $("#<%=txtsearch.ClientID %>").keyup(function () {               
                var $dtt = $("#<%=txtsearch.ClientID %>").attr("value");//on récupère le nom écrit
                var options = {
                    type: "POST",
                    url: "new_test.aspx/GetData",
                    data: "{'nom':'" + $dtt + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
 
                        if ($("#<%=txtsearch.ClientID %>").attr("value") != "") {
                            //on vide la liste des propositions
                            $("#dvlist").remove();
                            $("#dvcontainer").append('<div id="dvlist"></div>');
                            //pour chaque nom retourné on crée un label
                            $.each(response.d, function (key, value) {
                                $("#dvlist").append('<label id="_' + value + '">' + value + '</label><br />');
                            });
                            //Lors du click sur un label on met sa valeur dans le text box
                            $("label[id^='_']").click(function () {
                                $("#<%=txtsearch.ClientID %>").attr("value", $(this).text());
                                $("#<%=txtsearch.ClientID %>").focus();
                            });
                        } else {
                            $("#dvlist").remove();                            
                        }
                    },
                    error: function (response) {
                        alert(response.status + ' ' + response.statusText + ' ' + $dtt + ' ' + response.d);
                    }
                };
                $.ajax(options);                
            });
        });   
    </script>
    <br />
 
    <asp:TextBox runat="server" ID="txtsearch"></asp:TextBox><br />
    <div id="dvcontainer">       
    </div>

code behind

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
[WebMethod]
        public static ArrayList GetData(String nom)
        {
            String req;
            String connectionString;
            DataTable dt = new DataTable();
            ArrayList res = new ArrayList();
            req = "SELECT Nom FROM Auteur WHERE Nom LIKE ('" + nom.Replace("'", "''") + "%')"; // Request to get the names wich are like the @nom
            connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["test"].ConnectionString;//Get the connection string from the web.config
            SqlConnection cn = new SqlConnection(connectionString);
            SqlDataAdapter dad = new SqlDataAdapter(req, cn);
            dad.Fill(dt);
            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                res.Add(dt.Rows[i][0]);
            }
            return res; //Return a string array
        }