Wenn Sie eine einfache Website auf Google Polymer-Bibliothek mit Komponenten wie bauen würde, wie würden Sie Suche nach ihnen implementieren? Google halten ist das perfekte Beispiel dafür.Wie implementiert man einfache Suche nach Papierkarten mit Google Polymer
Wie binden Sie eine <paper-input> und <paper-button> mit Elemente und verstecken Sie die Elemente, die keine der Wörter der Suche im Titel und in der Beschreibung enthält?
Zum Beispiel, wenn wir diesen Code haben unten unten
<paper-input name="search" label="search"></paper-input>
<paper-button onclick="search()">Submit</paper-button>
<paper-card heading="Card one title" image="/image1.jpg" elevation="1">
<div class="card-content">
Some words containing the word - one
</div>
</paper-card>
<paper-card heading="Card two title" image="/image2.jpg" elevation="1">
<div class="card-content">
Some words containing the word - two
</div>
</paper-card>
Gibt es einen Weg, um es möglich zu machen, etwas sehr einfach mit? Wenn jemand die Lösung dafür hat, würde ich es sehr schätzen, wenn Sie es hier mit uns teilen.
Nach der Suche in der copepen.io fand ich den Code, der es erlaubt, zu suchen und für den Minimalismus geändert. Hier ist der Code unten, aber ich konnte es nicht mit der <paper-cards> arbeiten, wenn Sie es für den oben gezeigten Fall ändern könnten, würden Sie eine Menge helfen.
HTML
<label for="search-text">Search the list</label>
<input type="text" id="search-text" placeholder="search" class="search-box">
<span class="list-count"></span>
<ul id="list">
<li class="in">Apple</li>
<li class="in">Pumpkin</li>
<li class="in">blackberry</li>
CSS
.hidden {
display:none;
}
JS
$(document).ready(function() {
var jobCount = $('#list .in').length;
$('.list-count').text(jobCount + ' items');
$("#search-text").keyup(function() {
//$(this).addClass('hidden');
var searchTerm = $("#search-text").val();
var listItem = $('#list').children('li');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
//extends :contains to be case insensitive
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$("#list li").not(":containsi('" + searchSplit + "')").each(function(e) {
$(this).addClass('hiding out').removeClass('in');
setTimeout(function() {
$('.out').addClass('hidden');
}, 300);
});
$("#list li:containsi('" + searchSplit + "')").each(function(e) {
$(this).removeClass('hidden out').addClass('in');
setTimeout(function() {
$('.in').removeClass('hiding');
}, 1);
});
});
});