Google Like Search Box with Suggestion

Here are some tips to generate Google Like Search box with Suggestions.

Step 1: Create a page which will be called on TextChange event of theSearch Text Box and write the code as follows:

using System.Data.SqlClient;
using System.Text; 

string clientName;
    protected void Page_Load(object sender, EventArgs e)
    {
      clientName = Request["search"].ToString();
      Getresult();
       
    }

private void Getresult()
    {
        DataTable dt = new DataTable();      
         SqlConnection con = new SqlConnection();
         con.ConnectionString = "data source=yourServer;initial catalog=yourdatabaseIntegrated security=true;";        
        SqlCommand cmd=new SqlCommand();
        cmd.Connection=con;
        cmd.CommandText = "select studName from tbl_stud1 where studName like @nm";
        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("@nm", clientName + "%");
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(dt);
        StringBuilder sb = new StringBuilder();
      
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                sb.Append(dt.Rows[i].ItemArray[0].ToString()  + "~");   //Create Con
            }
        }
           Response.Write(sb.ToString());  
    }

Step 2: Now create the markup of main search page as follows:

<script language="JavaScript" type="text/javascript" src="SearchSuggest.js"></script>
    <style type="text/css" media="screen">   
       body
       {
        font: 11px arial;
       }
       .suggest_link
       {
       background-color: #FFFFFF;
       padding: 2px 6px 2px 6px;
       }   
       .suggest_link_over
       {
       background-color: #3366CC;
       padding: 2px 6px 2px 6px;   
       color: #FFFFFF;
       }   
       #search_suggest
       {
       position: absolute;
       background-color: #FFFFFF;
       text-align: left;
       border: 1px solid #000000;           
       }
    </style>

<table>
    <tr>
    <td style="font: 20px arial" >
    Welcome to Demo of Google like Search Suggest Text Box
    </td>
    </tr>
    </table>
   
   <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria"       onkeyup="searchSuggest(event);" autocomplete="off" style="width: 544px" />&nbsp;
    <div id="search_suggest" style="z-index: 2; visibility: hidden;position: absolute;left: 11px; width: 548px; top: 70px"></div>
    <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" />





Output:

   

Converting Gregorian Date To Hijri (Islamic) Date

Sometimes We need to convert the Gregorian Date to Islamic Date. We can do this by CultureInfo class of Globalization

Step 1: The markup

Enter Gregorian Date: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    <br />  
        <asp:Button ID="btnCheck" runat="server" Text="Check"
            onclick="btnCheck_Click" />
            <br />           
    <asp:label ID="lblDate" runat="server" text=""></asp:label>

Step 2: Write the Following Code on Button Click event.

using System.Globalization;
protected void btnCheck_Click(object sender, EventArgs e)
    {      
        CultureInfo arSA = CultureInfo.CreateSpecificCulture("ar-SA");
        string[] arrDt = txtDate.Text.Split('/');
        int dd = Convert.ToInt32(arrDt[0]);
        int mm = Convert.ToInt32(arrDt[1]);
        int yy=Convert.ToInt32(arrDt[2]);
        DateTime dt = new DateTime(yy,mm,dd);
        string s = dt.ToString("dd/MM/yyyy", arSA);
        lblDate.Text = "The Hijri Date is " + s;
    }

Output:

Setting the Dropdown Text which is not displayed in dropdown items in Asp.net

Many times we need to show the Text in the Dropdown but we need to stop the user from selecting it from the item list.
So here is the simple javascript to do the same.

Step 1: Page Markup

<h3>DropdownList Example</h3>
        Gender: <asp:DropDownList ID="ddlCheck" runat="server">  </asp:DropDownList>
  

Step 2: Code to bind the Dropdown

 ddlCheck.Items.Clear();
 ddlCheck.Items.Add("Select Gender");
 ddlCheck.Items.Add("Male");
 ddlCheck.Items.Add("Female");
 

Step 3: Now to Hide the 0th Item i.e "Select Gender" from the dropdownlist, write the following after binding the dropdownlist

 ddlCheck.Items[0].Attributes.Add("style", "display:none");


Output: