ASP.NET vb.net TextBox avec JQuery AutoComplete

Imports System.Data.SqlClient Imports System.Web.Services Public Class login <WebMethod()> Public Function ListeMarqueModele(ByVal bMarqueModele As String) As List(Of String) Dim Result As List(Of String) = New List(Of String) ExecuteLMD("select MarqueModele from a_vehicule where (MarqueModele like '" & bMarqueModele & "%')") Dim rn As Integer Do Until rn > bTab.Rows.Count - 1 Result.Add(bTab.Rows(rn).Item(0).ToString) rn = rn + 1 Loop bTab = Nothing Return Result End Function Dim bTab As DataTable Private Sub ExecuteLMD(ByVal bSql As String) Dim sqlCmd As New SqlCommand(bSql) Dim Dadpter As New SqlDataAdapter(sqlCmd) bTab = New DataTable Dim Dset As New DataSet SqlConn.Open() sqlCmd.Connection = SqlConn Dadpter.Fill(Dset, "bTable") bTab = Dset.Tables("bTable") sqlCmd = Nothing Dadpter = Nothing Dset = Nothing SqlConn.Close() End Sub Dim SqlConn as SqlConnection Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load SqlConn = New SqlConnection SqlConn.ConnectionString = ConfigurationManager.ConnectionStrings("LGHI").ToString end sub end class

Voilà la solution qui marche à coup sûr. Je la publie à toutes fins utiles

Bibliothèque

Code:

1
2
3
4
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>

Javascript

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
 
    <script type="text/javascript">
        $(function () {
            $("#area").autocomplete({
                source: function (request, response) {
                    var param = { areaname: $('#area').val() };
                    $.ajax({
                        url: "a_essai.aspx/GetAreas",
                        data: JSON.stringify(param),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(errorThrown);
                        }
                    });
                },
                minLength: 1//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
            });
        });
 
    </script>

ASP.NET

Code:

1
2
3
4
5
6
7
8
9
10
 
</head>
<body>
    <form id="form1" runat="server">
        <div class="form-items">
            Select Area<br />
            <asp:TextBox ID="area" CssClass="area" runat="server"></asp:TextBox>
        </div>
    </form>
</body>

VB.NET

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<WebMethod()>
    Public Shared Function GetAreas(areaname As String) As List(Of String)
        Dim area As New List(Of String)()
        Dim query As String = String.Format("SELECT MarqueModele FROM a_vehicule where (MarqueModele like '" & areaname & "%')")
        'Note: you can configure Connection string in web.config also.
        Dim conn As New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("LGHI").ConnectionString
        Dim cmd As New SqlCommand(query, conn)
        cmd.Parameters.AddWithValue("@SearchText", areaname)
        conn.Open()
        Dim reader As SqlDataReader = cmd.ExecuteReader()
        While reader.Read()
            area.Add(reader.GetString(0))
        End While
        Return area
    End Function

Comme je l'ai dit plus haut, le code marche. Cependant, je voudrais qu'en saisissant une valeur qui n'a pas de correspondance dans la liste, il m'affiche une alerte "Cette valeur n'existe pas dans la liste" car le "No match" ne s'affiche pas