Discussion :

[djelloharmel]

Bonjour.
Je tente de créer un textbox autocompleted avec jquery. J'ai lu toutes les documentations. J'implémente et quand j'exécute, il ne trouve pas de résultat. Voici le code

Code asp.net :

Sélectionner tout - Visualiser dans une fenêtre à part

<asp:TextBox ID="txtEssai" runat="server"></asp:TextBox>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> 
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"/>  
 
<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $("#txtEssai").autocomplete({
                source: function (request, response) {
                    var param = { bMarqueModele: $('#txtEssai').val() };
                    $.ajax({
                        url: "login.aspx/ListeMarqueModele",
                        data: JSON.stringify(param),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        data: "{'bMarqueModele':'" + document.getElementById('txtEssai').value + "'}",
                        dataFilter: function (data) { return data; }, 
                        success: function (data) {
                            response($.map(data.d, function (item) {  
                                return {  
                                    value: item
                                }
                            }))
                        },
                        error: function (result) {
                            alert("No Match");
                        }
                    });
                }
            });
        }
</script>

Code VB.NET :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Quand j'exécute, il me ramène le message 'No match'. Où est ce que j'ai fait la faute?

[djelloharmel]

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

Bibliothèque

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 asp.net :

Sélectionner tout - Visualiser dans une fenêtre à part

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 VB.NET :

Sélectionner tout - Visualiser dans une fenêtre à part

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