Is there any way to "optimize" this simple function? (am I not following best practices?)

I'm creating a search field that when you type something in to a clear button appears where when clicked will clear what you've been typing. The clear button should go away when you loose focus of the input field however come back if you focus in on the input开发者_StackOverflow中文版 field and there is something inside it.

The function does not need to be flexible to the sense that the markup structure can vary, the markup structure needs to be . It just needs to accommodate different selectors.

Markup:

<div id="searchfield">
      <div id="clearbutton"></div>
      <input name="searchbox" type="text" id="searchbox">
</div>

The JavaScript Function: (Note: I'm using jQuery)

function clearableSearchBox(searchbox, clearbutton) {
    var searchbox = jQuery(searchbox);
    var clearbutton = jQuery(clearbutton);

    // When a user starts to enter into the textbox, fade in the clear button
    searchbox.keydown(function() {
        clearbutton.fadeIn('fast');
    });

    // When a user clicks the clear button, remove the contents of the searchbox
    clearbutton.click(function() {
        searchbox.val('');
    });

    // When the textbox is unfocused, fade out the clear button
    searchbox.focusout(function() {
        clearbutton.fadeOut('fast');
    });

    // If there's something in the search box, fade in the close button
    searchbox.focusin(function() {
        if(searchbox.val()) {
            clearbutton.fadeIn('fast');
        }
    });
}

Finally, when you want to use the function, call it:

clearableSearchBox("#searchbox", "#clearbutton");

Any suggestions on optimization/best practices would be greatly appreciated. Thanks very much!

it would be possibly best practice if you use $ to prefix jquery-variables, eg:

function doSomething(selector) {
    var $selector = $(selector);
}

otherwise ... nope ... i've spotted nothing to opt ...

you could use chaining, eg:

searchbox
// When a user starts to enter into the textbox, fade in the clear button
.keydown(function() {
    clearbutton.fadeIn('fast');
})
// When the textbox is unfocused, fade out the clear button
.focusout(function() {
    clearbutton.fadeOut('fast');
})
// If there's something in the search box, fade in the close button
.focusin(function() {
    if(searchbox.val()) {
        clearbutton.fadeIn('fast');
    }
});

but i'm not a big friend of that ... dunno why :)

Make it a jQuery plugin:

$.fn.clearableSearchBox = function(searchbox, clearbutton) { 
    // all your code here
}

Then you can call it like this:

$(selector).clearableSearchBox();

You can also remove the first argument to the method and use this in its place inside your method, as long as the selector used in the jQuery method is your searchbox:

$.fn.clearableSearchBox = function(clearbutton) { 
    this; // your search box.  
    // inside a plugin, 'this' is already a jquery object, 
    // so there is no need to wrap it with $(this)

    // all your code here
}

If you're going to use this pattern, I would recommend generating the clear and close buttons dynamically in your js, to make the plugin as re-usable and easy to use as possible.

For more information about jQuery Plugins checkout the documentation.

One more point, you can chain the events binding also.

searchbox.keydown(function() {
    // code for keydown
}).focusout(function() {
   // code for focusout
}).focusin(function() {
    // code for focusin
});