Auto Suggestion Search TextBox in MasterPage using Jquery & WebServices in Asp.Net C#

Auto Suggestion Search MasterPage


Auto Suggestion Search Textbox in MasterPage  Search Textbox Add to ContentPlaceHolder and Name   Called to Scripts using WebService in Asp.Net C#.



 Auto Suggestion Box Master Page
 Auto Suggestion Box Multiple Table Search
 Auto Suggestion Ajax AutoCompleteExtender
 Auto Complete Search For WINDOW APPLICATION



                           DEMO



WebService.asmx  Coding



using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Web.Script.Services;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Data;


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService
{

    [WebMethod]
    public List<string> AutoSugg(string names)
    {
        List<string> result = new List<string>();

        SqlConnection con = new SqlConnection 
        (System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());

        con.Open();

        string query = "select name from student  where name LIKE @SearchText +'%'";

        SqlCommand cmd = new SqlCommand(query, con);

        cmd.Parameters.AddWithValue("@SearchText", names);

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        DataSet ds = new DataSet();

        adp.Fill(ds);

        SqlDataReader dr = cmd.ExecuteReader();

        if (ds.Tables[0].Rows.Count > 0)
        {

            while (dr.Read())
            {

                result.Add(dr["name"].ToString());

            }


        }
        else
        {
            result.Add("No Records Found");

        }


        return result;


    }


}



Html Coding



<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
  


<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">


                   <%--AUTOSUGGEST SEARCH TEXTBOX TO MASTERPAGE--%>
                   <%--AUTOSUGGEST SEARCH TEXTBOX TO MASTERPAGE--%>
                   <%--AUTOSUGGEST SEARCH TEXTBOX TO MASTERPAGE--%>


    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
 <script type="text/javascript">


     $(document).ready(function () {
         SearchText();
     });
     function SearchText() {
         $(".autosuggest").autocomplete({
             source: function (request, response) {
                 $.ajax({
                     type: "POST",
                     contentType: "application/json; charset=utf-8",
                     url: "WebService.asmx/AutoSugg",
                     data: "{'names':'" + document.getElementById('ContentPlaceHolder1_TextBoxAutoSearch').value + "'}",
                     dataType: "json",

                     success: function (data) {
                         response(data.d);

                     },
                     error: function (result) {
                         alert("Error");

                     }

                 });
             }
         });
     }
   </script>


                   <%--AUTOSUGGEST SEARCH TEXTBOX TO MASTERPAGE--%>
                   <%--AUTOSUGGEST SEARCH TEXTBOX TO MASTERPAGE--%>
                   <%--AUTOSUGGEST SEARCH TEXTBOX TO MASTERPAGE--%>




    <title></title> 


    <asp:ContentPlaceHolder id="head" runat="server">     
   
      

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
   
                   
     
                 <asp:TextBox ID="TextBoxAutoSearch"  class="autosuggest" runat="server"   ></asp:TextBox>

                   
       
        </asp:ContentPlaceHolder>
    </div>
       
    </form>
</body>
</html>





First  Add - New Master Page  Form









Master Page Show ContentPlaceHolder 










Next - Add  - TextBox To MasterPage ContentPlaceHolder1 - Id Change to TextBoxAutoSearch - Class Name Add to  WhatEver Use in Script Name










Next - Add To Web Service Form 










Web Service.cs - Add the NameSpaces - [WebMethod] - Next Add Your Coding  Below like that










Next - Add Your DataBase Table Name -  Read From DataReader  & DataSet  










Next - Add to Master Page Scripts using JQuery - Below Like That


Call the WebService Name,Data NAme,MethodName

ContentPlaceHolder1_TextBoxAutoSuggest - used to 
call the master page TextBox(search MasterPage Must Be Give ContentPlaceHolder Id from Textbox)









Insert the Date To Table Search Field









Next - Add New - Webform - Select Master Page - Add

This WebForm Add to Under the MasterPage








WebForm - Add to below the  Master Page  - OK









New Web Form - Right Click - Add to Default Master's Content










Master Page Contents Add  to New WebForm








Next - Run(F5) the New WebForm - Search TextBox  - Open - Search The Related Keyword









Next - aaaaaa - Related Names Displayed








Next - Search - b - Related Name Display








Next - Search - Without Table Name - Z - Display No Records Found












How To Pass Multiple ListBox Values To TextBox Using Asp.Net C#

Pass ListBox Multiple Values To TextBox 

ListBox


ListBox  Does Not Enter The Values  in  Run Time.


TextBox


TextBox Enter The Values in Run Time


ListBox Multiple Values Pass To TextBox  Same as the ListBox Formate Using Asp.Net C#.




DEMO






HTML Coding


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       

        <asp:ListBox ID="ListBox1" runat="server" Height="126px" Width="207px">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
        </asp:ListBox>


        <asp:TextBox ID="TextBox1" runat="server" Height="117px" TextMode="MultiLine" Width="209px"></asp:TextBox>
       

        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Pass  Values ListBox to TextBox" />
        <br />
        <br />
   
         
    </div>
    </form>
</body>
</html>




C# Coding


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ListBoxToTextBox : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

        for (int i = 0; i < ListBox1.Items.Count; i++)
        {

            TextBox1.Text += ListBox1.Items[i] + "\r";


        }

    }

}




First -  Add - New - WebForm 









Next - Add the ListBox From ToolBox








Next - Add the TextBox From ToolBox








Next - Add  the Button - Change The Required Name









Next - Right Click  the ListBox - Add List Item - Change The Text Name









Added The List Item Values to the ListBox










Next - Change TextMode From TextBox  MultiLine

Next - Double- Click - Write Coding to Button









Next - Write Coding To Pass Values From ListBox To TextBox (For Loop)










Next - Run (F5) the WebForm - Display the List Item in ListBox






OUTPUT



Next - Click the Button  Pass ListBox Values To TextBox






How To Remove Duplicate Values From ListBox Without Using DataBase in Asp.net C#



          Remove Duplicate Values  From ListBox 


Remove  Duplicate Values two ListBoxes  Using Without  Database Connection in Asp.net C#

Foreach  & if Conditions  Using  Remove Duplicate Values.





DEMO





Html Coding



<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body style="height243px">
    <form id="form1" runat="server">
    <div>
   
    <asp:ListBox ID="ListBox1" runat="server" Height="104px"
 OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" Width="95px">

            <asp:ListItem>AAA</asp:ListItem>
            <asp:ListItem>BBB</asp:ListItem>
            <asp:ListItem>CCC</asp:ListItem>
            <asp:ListItem>DDD</asp:ListItem>

        </asp:ListBox>


  <asp:ListBox ID="ListBox2" runat="server" Height="142px" Width="110px" >

            <asp:ListItem>AAA</asp:ListItem>
            <asp:ListItem>BBB</asp:ListItem>
            <asp:ListItem>CCC</asp:ListItem>
            <asp:ListItem>DDD</asp:ListItem>
            <asp:ListItem>EEE</asp:ListItem>
            <asp:ListItem>FFF</asp:ListItem>
            <asp:ListItem>GGG</asp:ListItem>
            <asp:ListItem>EEE</asp:ListItem>

        </asp:ListBox>   

     
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click"
 Text="Remove Duplicates" />
   
    </div>
    </form>
</body>


</html>


C# Coding



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {



        foreach (ListItem LISTBOXES in ListBox1.Items)
        {

            if (ListBox2.Items.Contains(LISTBOXES) == true)
            {

                ListBox2.Items.Remove(LISTBOXES);

            }

        }



    }



}




First  Add - New - Webform 








Next - Add the  Two ListBoxes From Toolbox







Select - ListBox1 - Right Click - Select Edit Items 









Next - Add  ListItems (Required)









Next - Add - Text Name (Reqiured) - OK








Next - Select Listbox2 - Right Click - Select Edit Items - Add - ListItems -  Enter the Text Name(Required) - OK.








Show The ListBoxes  Text Values 










Next - Add the Button - Change Text  Name - Double Click Button







Write The Coding Using Foreach  & Remove Duplicate  Values From ListBox2







        


Next - Run (F5) - Show the List Box Vaues 









Next -  Click The Button  - Duplicate Values  Remove & Show Below