locked
How to add Variable, % to get all list in Bootstrap AutoComplete RRS feed

  • Question

  • User-582711651 posted

    Dear Friends, 

    I'm struggling to implement few aspects, in Bootstrap AutoComplete details as follows

    I prepared my script based on this and it works well, URL: aspsnippets.com/Articles/Bootstrap-AutoComplete...

    but,

    1. I want to pass one variable from the Aspx page to CodeBehind it should be add in Where Condition ( like this Where EmpGender="ValGender" And [StCode] like )@SearchText )
    2. When I press % then all list should list down

    ref my script 

    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <script type="text/javascript" src="http://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
    <link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
    <script type="text/javascript">
     
    $(function () {
                $('[id*=Tx_STCode]').typeahead({
                hint: true,
                highlight: true,
                minLength: 4,
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Frm_StaffDocument.aspx/Get_EmpCode") %>',
                        data: "{ 'prefix': '" + request + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            items = [];
                            map = {};
                            $.each(data.d, function (i, item) {
                                var id = item.split('-')[1];
                                var name = item.split('-')[0];
                                map[name] = { id: id, name: name };
                                items.push(name);
                            });
                            response(items);
                            $(".dropdown-menu").css("height", "auto");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                updater: function (item) {
                    $('[id*=hfIFSC]').val(map[item].id);
                    return item;
                }
            });
        });
    }</script>
        <WebMethod()>
        Public Shared Function Get_EmpCode(prefix As String) As String()
    
            Dim f_stcode As New List(Of String)()
            Using conn As New SqlConnection()
                conn.ConnectionString = ConfigurationManager.ConnectionStrings("StConStr").ConnectionString
                Using cmd As New SqlCommand()
                    cmd.CommandText = "SELECT DISTINCT [TxnID],[STCode] FROM [dbo].[Mast_StaffCode_Info] Where [StCode] like @SearchText + '%' "
                    cmd.Parameters.AddWithValue("@SearchText", prefix)
                    cmd.Connection = conn
                    conn.Open()
                    Using sdr As SqlDataReader = cmd.ExecuteReader()
                        While sdr.Read()
                            f_stcode.Add(String.Format("{0}-{1}", sdr("STCode"), sdr("TxnID")))
                        End While
                    End Using
                    conn.Close()
                End Using
            End Using
            Return f_stcode.ToArray()
        End Function
    End Class
    <asp:TextBox ID="Tx_STCode" runat="server" CssClass="form-control" MaxLength="20" placeholder="11 Chars only" Style="text-transform: uppercase" TextMode="SingleLine" Width="200px"></asp:TextBox>

    Thanks in advance.

    Friday, April 23, 2021 12:31 PM

Answers

  • User1535942433 posted

    Hi ayyappan.CNN,

    I want to pass one variable from the Aspx page to CodeBehind it should be add in Where Condition ( like this Where EmpGender="ValGender" And [StCode] like )@SearchText )

    What's EmpGender? Is it a value of one control?

    When I press % then all list should list down

    I suggest you could check what's value to be passed.If it is "%",you could select all from database.

    Just like this:

    <script>
            $(function () {
                var value = xxx;
                $('[id*=Tx_STCode]').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 4,
                    source: function (request, response) {
                        $.ajax({
                            url: '<%=ResolveUrl("~/2175853.aspx/Get_EmpCode") %>',
                        data: "{ 'prefix': '" + request + "','emp':'"+ value+ "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            items = [];
                            map = {};
                            $.each(data.d, function (i, item) {
                                var id = item.split('-')[1];
                                var name = item.split('-')[0];
                                map[name] = { id: id, name: name };
                                items.push(name);
                            });
                            response(items);
                            $(".dropdown-menu").css("height", "auto");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                    },
                    updater: function (item) {
                        $('[id*=hfIFSC]').val(map[item].id);
                        return item;
                    }
                });
            });
    
        </script>

    Code-behind:

    If value = "%" Then
        cmd.CommandText = "SELECT * FROM Test1 "
    End If

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 26, 2021 6:59 AM