Adding two values to ajax autocomplete function in Asp.net web forms

Question

I have search textbox and i whould like to implement autocomplete checking in it. When you type one letter autocomplete need to give you all the names with that letter. I found tutorial with that but my problem is what I whould like implement two radio buttons and if first one is checked it will give you only suggestion for Clients, and if second one is checked it will give you only suggestion for companies.

I thried with this code in Web service.asmx

[WebMethod]
public class Autocomplete : System.Web.Services.WebService
{
    [WebMethod]

    public List<string> GetClientNames(string searchTerm,string rbtnValue)
    {
        List<string> clientNames = new List<string>();
        string connStr = ConfigurationManager.ConnectionStrings["RheosConnString"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(connStr))
        {
            if (rbtnValue == "radio0")
            {
                SqlCommand cmd = new SqlCommand("spGetClientNames", conn);
                cmd.CommandType = CommandType.StoredProcedure;
                SqlParameter param = new SqlParameter("@term", searchTerm);
                cmd.Parameters.Add(param);
                conn.Open();
                SqlDataReader sdr = cmd.ExecuteReader();
                while (sdr.Read())
                {
                        clientNames.Add(sdr["ime"].ToString());

                }
            }
            else
            {
                SqlCommand cmd = new SqlCommand("spGetCompanyNames", conn);
                cmd.CommandType = CommandType.StoredProcedure;
                SqlParameter param = new SqlParameter("@term", searchTerm);
                cmd.Parameters.Add(param);
                conn.Open();
                SqlDataReader sdr = cmd.ExecuteReader();
                while (sdr.Read())
                {

                        clientNames.Add(sdr["naziv"].ToString());

                }
            }

        }
        return clientNames;
    }

}

My Javascript looks like this

<script type="text/javascript" language="javascript">
        $(function () {
            $('#<%=txtSearch.ClientID%>').autocomplete({
                source: function (request, response) {
                    var value = $("form input[type='radio']:checked").val();
                    $.ajax({
                        url: "Autocomplete.asmx/GetStudentNames",
                        data: {searchTerm: request.term, rbtnValue:value},
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert('Postoji problem s dohvaćanjem zahtjeva');
                        }
                    });
                },
                minLength: 0
            });
        });

    </script>

Do I need implement something else for radiobuttons. My value is radio0 and radio1. Thank you!

Answer 1

In you service the method name is GetClientNames but in your ajax call you are calling to method GetStudentNames . Most probably this could be the issue. If this is not the issue kindly share your error so I would be able to help you out.

Answer 2

Thanks for suggestion I change it. But still not geting autocomplete My head code using master page

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <title>Klijenti</title>
    <script src="plugins/jquery-ui-1.12.1.custom/jquery-ui.js" type="text/javascript"></script>
    <script src="plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js" type="text/javascript"></script>
    <link href="plugins/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $('#<%=txtSearch.ClientID%>').autocomplete({
                source: function (request, response) {
                    var value = $("form input[type='radio']:checked").val();
                    $.ajax({
                        url: "Autocomplete.asmx/GetClientNames",
                        data: {searchTerm: request.term, rbtnValue:value},
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert('Postoji problem s dohvaćanjem zahtjeva');
                        }
                    });
                },
                minLength: 0
            });
        });

    </script>
</asp:Content>

And form components if this can help. I dont know it's not showing any error and when I write Client name it list it but when put company name it doesnt list it. Its the same what ever radiobutton I check.

<div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-search"></i>
                            </span>
                            <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" placeholder="Unesi pojam..."></asp:TextBox>
                            <!-- Radio buttons-->
                            <div class="col-sm-6">
                                <label>
                                    <input type="radio" name="radio" value="radio0" />Klijenti
                                </label>
                            </div>
                            <div class="col-sm-6">
                                <label>
                                    <input type="radio" name="radio" value="radio1" />Tvrtke
                                </label>
                            </div>
                            <!-- End of radio buttons-->
                            <asp:Button ID="btnSearch" runat="server" class="btn btn-primary btn-block" Text="Pretraži" OnClick="btnSearch_Click"/>
                        </div>