We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 16633
    • 116 Posts
    I am working with simple search and the default value is:

    [[+searchValue]]

    Which:

    "Defaults blank unless a prior search has been performed."

    Is there a way to make this Default to "Search..." or a specified term if no search has been performed? Then once a search is perfomed it will changed to the searched term.

    Thanks!
    PS: I am using the lastest release of revo 2.0.4 pl2
      --
      Landon Poburan
      Web Designer and Developer

      http://www.categorycode.ca
      http://www.landonp.com
      • 8323
      • 14 Posts
      Well, there is a way. It works if you clear that value ("Search...") on focus using JavaScript.

      Example:
      <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="Search... [[+searchValue]]"></input>


      Here is jQuery script I use.
      /* 
       * Cross-browser event handling, by Scott Andrew
       */
      function addEvent(element, eventType, lamdaFunction, useCapture) {
          if (element.addEventListener) {
              element.addEventListener(eventType, lamdaFunction, useCapture);
              return true;
          } else if (element.attachEvent) {
              var r = element.attachEvent('on' + eventType, lamdaFunction);
              return r;
          } else {
              return false;
          }
      }
      
      /* 
       * Kills an event's propagation and default action
       */
      function knackerEvent(eventObject) {
          if (eventObject && eventObject.stopPropagation) {
              eventObject.stopPropagation();
          }
          if (window.event && window.event.cancelBubble ) {
              window.event.cancelBubble = true;
          }
          
          if (eventObject && eventObject.preventDefault) {
              eventObject.preventDefault();
          }
          if (window.event) {
              window.event.returnValue = false;
          }
      }
      
      /* 
       * Safari doesn't support canceling events in the standard way, so we must
       * hard-code a return of false for it to work.
       */
      function cancelEventSafari() {
          return false;        
      }
      
      /* 
       * Cross-browser style extraction, from the JavaScript & DHTML Cookbook
       * <http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap5/index5.html>
       */
      function getElementStyle(elementID, CssStyleProperty) {
          var element = document.getElementById(elementID);
          if (element.currentStyle) {
              return element.currentStyle[toCamelCase(CssStyleProperty)];
          } else if (window.getComputedStyle) {
              var compStyle = window.getComputedStyle(element, '');
              return compStyle.getPropertyValue(CssStyleProperty);
          } else {
              return '';
          }
      }
      
      /* 
       * CamelCases CSS property names. Useful in conjunction with 'getElementStyle()'
       * From <http://dhtmlkitchen.com/learn/js/setstyle/index4.jsp>
       */
      function toCamelCase(CssProperty) {
          var stringArray = CssProperty.toLowerCase().split('-');
          if (stringArray.length == 1) {
              return stringArray[0];
          }
          var ret = (CssProperty.indexOf("-") == 0)
                    ? stringArray[0].charAt(0).toUpperCase() + stringArray[0].substring(1)
                    : stringArray[0];
          for (var i = 1; i < stringArray.length; i++) {
              var s = stringArray[i];
              ret += s.charAt(0).toUpperCase() + s.substring(1);
          }
          return ret;
      }
      
      /*
       * Disables all 'test' links, that point to the href '#', by Ross Shannon
       */
      function disableTestLinks() {
        var pageLinks = document.getElementsByTagName('a');
        for (var i=0; i<pageLinks.length; i++) {
          if (pageLinks[i].href.match(/[^#]#$/)) {
            addEvent(pageLinks[i], 'click', knackerEvent, false);
          }
        }
      }
      
      /* 
       * Cookie functions
       */
      function createCookie(name, value, days) {
          var expires = '';
          if (days) {
              var date = new Date();
              date.setTime(date.getTime() + (days*24*60*60*1000));
              var expires = '; expires=' + date.toGMTString();
          }
          document.cookie = name + '=' + value + expires + '; path=/';
      }
      
      function readCookie(name) {
          var cookieCrumbs = document.cookie.split(';');
          var nameToFind = name + '=';
          for (var i = 0; i < cookieCrumbs.length; i++) {
              var crumb = cookieCrumbs[i];
              while (crumb.charAt(0) == ' ') {
                  crumb = crumb.substring(1, crumb.length); /* delete spaces */
              }
              if (crumb.indexOf(nameToFind) == 0) {
                  return crumb.substring(nameToFind.length, crumb.length);
              }
          }
          return null;
      }
      
      function eraseCookie(name) {
          createCookie(name, '', -1);
      }
      
      /*
       * Clear Default Text: functions for clearing and replacing default text in
       * <input> elements.
       *
       * by Ross Shannon, http://www.yourhtmlsource.com/
       */
      
      addEvent(window, 'load', init, false);
      
      function init() {
          var formInputs = document.getElementsByTagName('input');
          for (var i = 0; i < formInputs.length; i++) {
              var theInput = formInputs[i];
              
              if (theInput.type == 'text') {  
                  /* Add event handlers */          
                  addEvent(theInput, 'focus', clearDefaultText, false);
                  addEvent(theInput, 'blur', replaceDefaultText, false);
                  
                  /* Save the current value */
                  if (theInput.value != '') {
                      theInput.defaultText = theInput.value;
                  }
              }
          }
      }
      
      function clearDefaultText(e) {
          var target = window.event ? window.event.srcElement : e ? e.target : null;
          if (!target) return;
          
          if (target.value == target.defaultText) {
              target.value = '';
          }
      }
      
      function replaceDefaultText(e) {
          var target = window.event ? window.event.srcElement : e ? e.target : null;
          if (!target) return;
          
          if (target.value == '' && target.defaultText) {
              target.value = target.defaultText;
          }
      }
      
      /*
       * jQuery autoResize (textarea auto-resizer)
       * @copyright James Padolsey http://james.padolsey.com
       * @version 1.04
       */
      
      (function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).attr('tabIndex','-1').insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery);
      
      /*
       * jQuery autoREsize
       * function
       */
       
       $(document).ready(function() {
       
      	$('textarea').autoResize({
      		// Quite slow animation:
      		animateDuration : 500,
      		// More extra space:
      		extraSpace : 40
      	});
      	
      });
      

      Get rid of last few lines (check comments) as they auto resize textareas automatically and you might not need it smiley

      You can check how it works here:
      http://www.probosys.com
      Search form is in the footer.
        • 16633
        • 116 Posts
        Here is a much simpler solution I find. It just happens to not be in the documentation.

        <input type="text" name="[[+searchIndex]]" value="[[+searchValue:default=`Search`]]" />
          --
          Landon Poburan
          Web Designer and Developer

          http://www.categorycode.ca
          http://www.landonp.com
          • 17016
          • 138 Posts
          Hi landonpoburan,

          do you have an idea how to clear the content of the search field automatically by clicking on the search-filed? It is a nice feature in my opinion which is provided on some websites...

          Letti
            • 19132
            • 199 Posts
            input:focus in CSS does the trick.
              MySQL: 5.0.45
              PHP: 5.2.6
              Linux 2.6.9-023stab048.6-enterprise #1
              cURL enabled
              PDO enabled
              FFox Apple 3.6.8
              Firebug DIS-abled