Aug 24, 2010

Klonen mit jQuery – in Echtzeit

Kategorie: jQuery Autor: Viktor Dite

Mit Hilfe von jQuery lässt sich die Eingabe eines bspw. Suchfelds ganz einfach in Echtzeit klonen bzw. in andere Felder duplizieren. Um zu verdeutlichen, was ich meine, hier ein kleines Video:

This movie requires Flash Player 9

Die Eingabe muss natürlich nicht unbedingt wie hier in zwei weitere Felder hin geklont werden. Sie kann auch bspw. an versteckte Formelemente weitergegeben werden und etc.

Beispielcode:

html:


<div class="pick">
  <input type="text" name="keywords" value="Suche:"
       class="inputTEXT" maxlength="30" size="17" >
</div>


<div id="search_panel">
  <div style="float:right;">
    <form method="get" rel="nofollow" action="/advanced_search_result1.php"
        name="quick_find_header">
      <table>
        <tr>
          <td>Produktsuche</td>
          <td><input type="text" name="keywords" class="inputTEXT"
                   maxlength="30" size="20" ></td>
          <td><button type="submit">
                    <img src="/images/searchbutton.jpg"/>
                  </button></td>
        </tr>
      </table>
    </form>
  </div>

  <div style="float:right;">
    <form method="get" rel="nofollow" action="/advanced_search_result2.php"
         name="quick_find_header">
      <table>
        <tr>
          <td>Artikelsuche</td>
          <td><input type="text" name="keywords" class="inputTEXT"
                       maxlength="30" size="20" ></td>
          <td><button type="submit">
                     <img src="/images/searchbutton.jpg"/>
                  </button>
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>

CSS:

#search_panel {
  height: 86px;
  background: #fff;
  display: none;
}
.pick {
  width: 125px;
  padding: 5px 0;
}

JS:

<script type="text/javascript">
jQuery(document).ready(function() {
  var i=0;
  jQuery(".pick").click(function(){
    //empty the "Suche" phrase inside the input
    jQuery('.pick input').val('');
  });

  jQuery('.pick input').keyup(function () {
    //slide down only at the first keyup event
    if(i==0){
      jQuery("#debug").slideToggle("slow");
    }
    i=1;
    //clone all entries from actual element
    jQuery('.inputTEXT').val($(this).val());
  });
});
</script>

Gefällt Dir der Artikel? Dann würde ich mich sehr freuen, wenn Du ihn bewerten würdest!

Bewertungen für: Klonen mit jQuery – in Echtzeit