Wednesday, June 6, 2012

Auto complete TextBox using jquery and Database.


Auto complete TextBox is common for most of the application, but there are different ways to implement this functionality. Here I am explaining this functionality using JQuery and Database. In this example, I am implementing Auto complete functionality for "Name" field in database table. I have used following JavaScript and CSS files to complete this functionality.

JavaScript Files-
jquery-1.4.1.min.js
jquery-ui-1.8.20.custom.min.js

CSS Files-
jquery-ui-1.8.20.custom.css

Now Include these files in your application like this-


Solution Exlporer


Make same directory structure as I have shown you in image.

Now design your .aspx page like this-
 

AutoComplete.aspx

<head runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    <link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
    <title>Auto complete TextBox</title>
    <script type="text/javascript">
        function AutoComplete() {
            var names = $('#<%= hdnNames.ClientID %>').val();
            if (names != null && names != "") {
                var arrOfNames = names.split("?");
                $("#<%=txtName.ClientID %>").autocomplete({
                    source: arrOfNames
                });
            }
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Enter Name:
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                    <asp:HiddenField ID="hdnNames" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>



In this page I have taken one HiddenField, why- After reading all the names from table I am concatenating names with separator character "?" and  assigning to  HiddenField.

Now in script code (AutoComplete() function ), I am implementing functionality for auto complete TextBox  after splitting value of HiddenField.
 

Server side code-

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetNames();
            ClientScript.RegisterStartupScript(typeof(Page), "AutoComplete", "AutoComplete();",true);
        }
    }
    private void GetNames()
    {
        try
        {
            SqlConnection con = new SqlConnection("Connection string");
            con.Open();
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter("select name from employee", con);
            da.Fill(ds);
            if (ds!=null)
            {
                foreach (DataRow row in ds.Tables[0].Rows)
                {
                    //concatenating value with separator character -"?"
                    hdnNames.Value = hdnNames.Value + row[0].ToString() + "?"; 
                }
            }
        }
        catch (Exception)
        {  
            throw;
        }
    }


In server side code, I have defined one function (GetNames()) to get names form employee table and after concatenating assign   to HiddenField value. The main backbone for this functionality is implementing by using this line-


ClientScript.RegisterStartupScript(typeof(Page), "AutoComplete", "AutoComplete();",true);

Using this line, I am binding Auto complete feature to txtName textBox.

Now done, After running the application output will be like this-



Auto complete textBox



Thanks.

17 comments:

  1. Replies
    1. Hi Saleem, This is working example, check for any missing code, I have given complete code.

      Delete
  2. hi but it take time to get 12000 records

    ReplyDelete
  3. i am not able to find. the jquery and css file,help me from where to get them

    ReplyDelete
    Replies
    1. Hi,
      You can simply get these css and javascript file from jqueryui.com, Here you file find complete package of css and javascript files.

      Delete
  4. where we can find the javascript and css files to be added on the project

    ReplyDelete
    Replies
    1. Hi,
      You can simply get these css and javascript file from jqueryui.com, Here you file find complete package of css and javascript files.
      Or you can simply search in google for these css and javascript file.

      Delete
  5. Thank you so much:) :) :) We got solution :)

    ReplyDelete
  6. hey i got autocomplete but iam unable to click on items insted i have to type all characters which i again time consuming to my project so is there any solution to this please let me know

    ReplyDelete
  7. i am new tomthe jquery..please guide me that how can we add that .js filesand what logic should be written in it

    ReplyDelete
  8. from where i could get
    1]Scripts/jquery-1.4.1.min.js"
    2]Scripts/jquery-ui-1.8.20.custom.min.js
    3]Css/jquery-ui-1.8.20.custom.css
    these files.please let me know

    ReplyDelete
    Replies
    1. YOu can download these files from jqueryui.com,

      YOu can also directly search these files in google there you will get.

      Delete
  9. thanks for this program but i want to take name from begining only first letter. for example i write "a" and after that i want to see begining "a"

    ReplyDelete