Monday, 10 August 2015

Jquery Auto complete text box in asp.net

//Query
string sSql = string.Format("SELECT CurrencyCode + ' (' + CountryName + ')' as CurrencyCode, CurrencySeqId FROM Tbl_Currencies WHERE CurrencyCode LIKE '%{0}%' OR CountryName LIKE '%{0}%' Order By CurrencyCode ", sCurrency);





In YourPage.aspx.cs
[WebMethod]
public static List<string> GetCurrency(string sCurrency)
{
      List<string> Currency = new List<string>();
      DataTable dt = null;
//Use that query and get the data from your DB (my Method name is “GetCurrencyForAuto”)
      dt = GetCurrencyForAuto(sCurrency);

      for (int i = 0; i < dt.Rows.Count; i++)
      {               
Currency.Add(string.Format("{0}/{1}", dt.Rows[i][0].ToString(), dt.Rows[i][1].ToString()));
      }
      return Currency;
}
 
In YourPage.aspx
<head>
<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" />
<style>
        .ui-autocomplete
        {
            max-height: 250px;
            overflow-y: auto;
            overflow-x: hidden;
        }
</style>


<script type="text/javascript">
        $(function () {
            $("#txtCurrency").autocomplete({
                source: function (request, response) {
                    var param = { sCurrency: $('#txtCurrency').val() };
                    $.ajax({
                        url: "YourPage.aspx/GetCurrency",
                        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 {
                                    label: item.split('/')[0],
                                    val: item.split('/')[1]
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                select: function (e, i) {
                    $("#<%=hdnCurrencyId.ClientID %>").val(i.item.val);
                },
                minLength: 1 //minLength as 1, it means when ever user enter 1st character in TextBox the AutoComplete method will fire and get its source data.
            });
        });
    </script>
</head>
<form>
      <asp:TextBox ID="txtCurrency" runat="server" Text="" Width="100%"></asp:TextBox>

      <input type="hidden" runat="server" id="hdnCurrencyId" />
</form>

Out Put: You can search country-wise or currency name-wise in the textbox. and store the CurrencySeqId (PrimaryKey & Auto Number) to hidden box for save purpose.

No comments: