timeoff
Goto Top

Suchfeld zurücksetzen

Hallo zusammen,

ich hab mal eine kurze Frage an euch.

Und zwar benutze ich folgendes Script zum durchsuchen einer Tabelle.
Wenn man ins Suchfeld etwas eingibt erscheint rechts am Rand ein
Button zum löschen des Suchfeldes. Wenn man auf diesen Button klickt
wird auch das Suchfeld wie gewünscht gelöscht, aber leider bekomme ich es
nicht so hin das auch die Tabelle wieder zurückgesetzt wird, diese bleibt leider
bei der letzten Suche stehen, obwohl das Eingabefeld ja jetzt wieder leer ist.
Hat von euch vielleicht jemand einen Tipp wie ich das korrigieren kann ?

Mit Freundlichen Grüßen
Tobias

<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>  

<style>

input {margin-bottom: 5px; padding: 2px 3px; height:30px; width: 222px;}
td {padding: 4px; border: 1px #555 solid; width: 100px;
border-radius: 3px;}

.clearable{
  background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
  border: 1px solid #777;
  padding: 3px 18px 3px 4px;
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }
.clearable::-ms-clear {display: none; width:0; height:0;}

body{
padding: 20px; 
color:#777;
text-align:center;

}

</style>

<script id="jsbin-javascript">  
jQuery(function($) {
 
  function tog(v){return v?'addClass':'removeClass';}   
  $(document).on('input', '.clearable', function(){  
    $(this)[tog(this.value)]('x');  
  }).on('mousemove', '.x', function( e ){  
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');     
  }).on('touchstart click', '.onX', function( ev ){  
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();  
  });
  
});
</script>

<script type="text/javascript">//<![CDATA[  
$(window).load(function(){


var $rows = $('#table tr');  
$('#search').keyup(function() {  
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();  

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();  
        return !~text.indexOf(val);
    }).hide();
});

});//]]> 

</script>

</head>
<body>

<input id="search" class="clearable" type="text" name="" value="" placeholder="Suchbegriff..." />    
  
<table align="center" id="table">  
   <tbody><tr>
      <td>Tom</td>
      <td>Cruise</td>
   </tr>
   <tr>
      <td>Brad</td>
      <td>Pitt</td>
   </tr>
   <tr>
      <td>Angelina</td>
      <td>Jolie</td>
   </tr>
   <tr>
      <td>George</td>
      <td>Clooney</td>
   </tr>
   <tr>
      <td>Matt</td>
      <td>Damon</td>
   </tr>
   <tr>
      <td>Katie</td>
      <td>Holmes</td>
   </tr>
</tbody></table>
  
</body>
</html>

Content-Key: 296519

Url: https://administrator.de/contentid/296519

Ausgedruckt am: 28.03.2024 um 11:03 Uhr

Mitglied: SaschaRD
SaschaRD 17.02.2016 aktualisiert um 11:15:27 Uhr
Goto Top
Hallo timeoff,

habe auf einer meiner Seiten den folgenden Button eingebaut, um die Suche wieder auf null (Leer) zurückzusetzen:
<input type="image" src="img/refresh.png" name="refresh" alt="Refresh" onclick="history.go(0)">  

Hier ein Beispiel von W3Schools.
Gruß, Sascha
Mitglied: 114757
Lösung 114757 17.02.2016 aktualisiert um 17:57:56 Uhr
Goto Top
Moin.
Hinter Zeile 42 noch folgende Zeile einfügen, und Brad und Angie geben sich die Ehre face-wink:
$('#table tr').css("display","table-row");
Gruß jodel32
Mitglied: timeoff
timeoff 17.02.2016 um 17:57:30 Uhr
Goto Top
Danke dir jodel32
jetzt klappts