3
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
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>
Auf Facebook teilen
Auf X (Twitter) teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 296519
Url: https://administrator.de/forum/suchfeld-zuruecksetzen-296519.html
Ausgedruckt am: 20.04.2025 um 07:04 Uhr
3 Kommentare
Neuester Kommentar
Hallo timeoff,
habe auf einer meiner Seiten den folgenden Button eingebaut, um die Suche wieder auf null (Leer) zurückzusetzen:
Hier ein Beispiel von W3Schools.
Gruß, Sascha
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
Moin.
Hinter Zeile 42 noch folgende Zeile einfügen, und Brad und Angie geben sich die Ehre
:
Gruß jodel32
Hinter Zeile 42 noch folgende Zeile einfügen, und Brad und Angie geben sich die Ehre
:$('#table tr').css("display","table-row");
Danke dir jodel32
jetzt klappts
jetzt klappts
