Monday, 10 August 2015

Jquery Auto complete text box in

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
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
<script src=""></script>
<script src=""></script>
<link rel="Stylesheet" href="" />
            max-height: 250px;
            overflow-y: auto;
            overflow-x: hidden;

<script type="text/javascript">
        $(function () {
                source: function (request, response) {
                    var param = { sCurrency: $('#txtCurrency').val() };
                        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) {
                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.
      <asp:TextBox ID="txtCurrency" runat="server" Text="" Width="100%"></asp:TextBox>

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

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.