A jQuery code being applied in many input, but I want it only on a intended input which is a (search box)?

I am creating an expanding search box, when it is on focus it gets expanded and contracts when off the focus, but I have in my page many buttons, textboxes and radio buttons, when on click or focus other same to search bo开发者_StackOverflowx gets expand and contract.

         The code I am using:

    <script  type="text/javascript" src="for admg/jquery-latest.min.js"></script> 

    <script type="text/javascript">
        //global vars
        var inputWdith = '150px';
        var inputWdithReturn = '100px';
        $(document).ready(function () {
            $('input').focus(function () {
                //clear the text in the box.
             //   $(this).val(function () {
             //       $(this).val('');
             //   });
                //animate the box
               $(this).animate({
                    width: inputWdith

                }, 500)
            });

            $('input').blur(function () {
                $(this).val(' Search  ');
                $(this).animate({
                    width: inputWdithReturn 
                }, 800) 
            });
        });

    </script> 

---

With $('input'), you select every kind of input. Give your search box an id or class attribute, e.g. <input id="searchBox" type="text" />, then select it with $('#searchBox') (or $('.searchBox') for a class attribute).

---

If you searchbox is an aspnet control like this.

    <asp:TextBox runat="server" ID="texbox"></asp:TextBox>

Then the correct selector would be something like this:

    $('#<%=texbox.ClientID %>')

Hope it helps