Question

I am working on a site right now and have discovered that the jquery/javascript that I have implemented for the Search applies the same effect to all search boxes on the page when I click in the input field. By default, it removes the “Search” text and clears it out so that you can type your search term. I only want it to perform this function on the search box that is clicked within, not all search boxes on the page. However, if you look at this example, you’ll notice that when you click into the search field at the top of the page, it clears the text out of both. I think I could fix it with .parent() or something, but am a jQuery novice. Any help would be appreciated.

Also don’t know quite why the border is showing up around my icon, but I’ll fix that.

Here’s the search function jQuery:

$(document).ready(function(){
  $('.search-box').textdefault({'text':'Search'});
});

(function($){
  $.fn.textdefault = function(settings){
    var Elements = this;
    var settings = $.extend({}, $.fn.textdefault.defaults, settings);
    return Elements.each(function(){
      if($(Elements).is("input")){ TextDefault( $(Elements) ); }
    });

    function TextDefault(Input){
      if (Input.val().length==0) Input.val(settings.text);
      Input.focus(function () {
        if (Input.val()==settings.text) Input.val('');
      });
      Input.blur(function () {
        if (Input.val().length==0) Input.val(settings.text);
      });
    }
  };

  $.fn.textdefault.defaults = {
    text: 'Search'
  };

})(jQuery);

Thanks!
Taylor

Answer 1

plugin example

here is the correction.

Elements contains all the elements that are ‘passed’ to this plugin.

var Elements = this;

By using $(Elements) instead of $(this) in the each function, you
used all inputs as one

  return Elements.each(function() {
            if ($(this).is("input")) {
                TextDefault($(this));
            }
        });

This line of code should be called to initialize the plugin. So it should be put somewhere outside of the plugin, in a $(document).ready() {} code block for example, since you need the plugin initialized for the inputs on the load of the page.

$('.search-box').textdefault({
        'text': 'Search'
    });