JavaScript zum Erreichen der Produktabfragefunktion
|
In diesem Artikelbeispiel wird der spezifische Javascript-Code zur Realisierung der Produktabfragefunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Dies ist die Hauptschnittstelle ohne Klicken auf die Abfrage
Dies ist nach dem Klicken auf die Namensabfrage
Suche nach Preis
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>JavaScript-Abfragefunktion</title>
<Stil>
Körper{
Schriftfamilie: „Microsoft YaHei“;
Schriftgröße: 18px;
}
Tisch {
Breite: 800px;
Rand: 1px durchgezogen #000;
Rahmen-Zusammenbruch: Zusammenbruch;
Rand: 0 automatisch;
}
td,th {
Rand: 1px durchgezogen #000;
Textausrichtung: zentriert;
}
Eingabe {
Breite: 70px;
}
.suchen {
Breite: 600px;
Rand: 20px automatisch;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Suche">
Suche nach Preis: <input type="text" class="start"> - <input type="text" class="end">
<button class="search-price">Suchen</button>
<br><br>
Suche nach Produktnamen: <input type="text" class="product">
<button class="search-pro">Suchen</button>
</div>
<Tabelle>
<Kopf>
<tr>
<th>Produktname</th>
<th>Preis</th>
<th>Prozessor</th>
<th>Bildschirm</th>
<th >Kamera</th>
<th>Batterie</th>
<th >Funktionen</th>
</tr>
</thead>
<tbody>
</tbody>
</Tabelle>
<Skript>
//Verwende die neue Array-Methode zum Verarbeiten von Daten var data = [
{
pname: "Huawei mateX2",
Preis: 17999,
Prozessor:'Kirin 9000',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Huawei mate40Pro',
Preis: 6599,
Prozessor:'Kirin 9000',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Huawei mate40',
Preis: 4999,
Prozessor: „Kirin 9000E“,
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: "Huawei mate30Pro",
Preis: 5499,
Prozessor:'Kirin 990',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: "Huawei mate30",
Preis: 3599,
Prozessor:'Kirin 990',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Huawei P40Pro',
Preis: 7999,
Prozessor:'Kirin 990',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Huawei P40',
Preis: 3999,
Prozessor:'Kirin 990',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Honor 30 Pro',
Preis: 3999,
Prozessor:'Kirin 990',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Huawei mate20Pro',
Preis: 1599,
Prozessor:'Kirin 980',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Xiaomi 11Pro',
Preis: 4799,
Prozessor:'Qualcomm Snapdragon 888',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Xiaomi 11',
Preis: 3799,
Prozessor:'Qualcomm Snapdragon 888',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'Xiaomi Mix4',
Preis: 5499,
Prozessor:'Qualcomm Snapdragon 888',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
Benutzername: „Redmi K40Pro“,
Preis: 2999,
Prozessor:'Qualcomm Snapdragon 888',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
Benutzername: 'Redmi K40',
Preis: 1999,
Prozessor: „Qualcomm Snapdragon 870“,
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: 'VivoX60Pro',
Preis: 5499,
Prozessor:'Qualcomm Snapdragon 888',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: "VivoX60",
Preis: 3499,
Prozessor:'Orion',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
{
pname: "OPPOReno6Pro",
Preis: '',
Prozessor:'Qualcomm Snapdragon 888',
Bildschirm:'',
Kamera:'',
Batterie:'',
Charakteristische Funktion:'',
},
];
// 1. Elemente definieren und abrufen var tbody = document.querySelector('tbody');/*tbody definieren*/
var search_price = document.querySelector('.search-price');/*Suchpreis definieren*/
var Prozessor = document.querySelector('.processor');/*Prozessor definieren*/
var screen = document.querySelector ('.screen'); /* Bildschirm definieren */
var Kamera = document.querySelector ('.camera'); /* Kamera definieren */
var Battery = document.querySelector ('.Battery'); /* Batterie definieren */
var CharacteristicFunction = document.querySelector ('.CharacteristicFunction'); /* Charakteristische Funktion */
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var Produkt = document.querySelector('.product');
setDate(Daten);
// 2. Rendern Sie die Daten auf der Seite function setDate(mydata) {
// Zuerst die Daten im ursprünglichen Tbody löschen tbody.innerHTML = '';
mydata.forEach(Funktion(Wert) { /* hinzufügen */
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + wert.pname + '</td><td>'
+ Wert.Preis+'</td><td>'
+ Wert.Prozessor+'</td><td>'
+ Wert.Bildschirm+'</td><td>'
+ Wert.Kamera+'</td><td>'
+ Wert.Batterie+'</td><td>'
+ Wert.Merkmalfunktion+'</td>'
;
tbody.appendChild(tr);
});
}
// 3. Produkte nach Preis abfragen // Klicke auf den Button, um die Objekte im Array nach dem Produktpreis zu filtern search_price.addEventListener('click', function() {
var neuesDatum = Daten.Filter(Funktion(Wert) {
Rückgabewert.Preis >= Startwert und Wert.Preis <= Endwert;
});
console.log(neuesDatum);
// Rendern Sie die gefilterten Objekte auf der Seite setDate(newDate);
});
// 4. Fuzzy-Suche ---- Suche nach Produkten anhand des Produktnamens Fuzzy-Suche product.addEventListener('keyup', function() {
// Rendern Sie die erhaltenen Daten auf der Seite var result = data.filter(function(value) {
wenn (Wert.pname.includes(Produkt.Wert)) {
Rückgabewert
}
})
setDate(Ergebnis);
setDate(Daten.Filter(Funktion(Wert) {
wenn (Wert.pname.includes(Produkt.Wert)) {
Rückgabewert
}
}));
})
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung der Prinzipien und der Verwendung von MySQL-Datentypen und Feldattributen
>>: Vue implementiert Beispielcode zur Formulardatenvalidierung
Artikel empfehlen
Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation
Standardmäßig läuft Docker über einen nicht verne...
Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10
Dieser Artikel zeichnet das Installations-Grafik-...
Detaillierte Analyse des React Diff-Prinzips
Inhaltsverzeichnis Diffing-Algorithmus Schicht-fü...
Zehn nützliche und einfache MySQL-Funktionen
Funktion 0. Aktuelle Uhrzeit anzeigen Befehl: sel...
Detaillierte Schritte zur Installation von Mysql5.7.19 mit yum auf Centos7
In der Yum-Quelle von Centos7 ist standardmäßig k...
Tutorial zur HTML-Tabellenauszeichnung (15): Tabellentitel
<br />Mit diesem Tag können Sie direkt einen...
MySQL 8.X Installations-Tutorial unter Windows
Zuvor habe ich MySQL 5.7 verwendet, aber da MySQL...
Vue implementiert den Download von ZIP-Dateien
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Einführung in die Gesamtstruktur von Tomcat
Tomcat ist weithin als Webcontainer bekannt. Es h...
So optimieren Sie Bilder, um die Website-Leistung zu verbessern
Inhaltsverzeichnis Überblick Was ist Bildkomprimi...
jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird
Schauen wir uns zunächst meinen Fehlercode an. ht...
Eine kurze Diskussion darüber, ob zu viele MySQL-Datenabfragen OOM verursachen
Inhaltsverzeichnis Auswirkungen eines vollständig...
Beschreibung des MySQL-Optimierungsparameters query_cache_limit
query_cache_limit query_cache_limit gibt die Puff...
Detaillierte Erklärung der Funktionen IFNULL() und COALESCE() zum Ersetzen von Null in MySQL
Die Funktion isnull() kann nicht als Ersatz für N...
Spezifische Verwendung von MySQL-Fensterfunktionen
Inhaltsverzeichnis 1. Was ist eine Fensterfunktio...