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
So lässt man in CSS die Höhe eines untergeordneten Divs den verbleibenden Platz des übergeordneten Containers ausfüllen
1. Verwenden Sie die Floating-Methode Effektbild:...
Grundlegende Hinweise zu HTML und CSS (unbedingt für das Frontend lesen)
Als ich zum ersten Mal mit HTML in Berührung kam,...
Zusammenfassung der Methoden zum Suchen und Löschen doppelter Daten in MySQL-Tabellen
Manchmal speichern wir viele doppelte Daten in de...
Bewertungsregeln von YSlow, einem von Yahoo entwickelten Webseiten-Bewertungs-Plugin
YSlow ist ein von Yahoo USA entwickeltes Plug-in ...
Grundlegende Anwendungsmethoden für eingebettete und externe JavaScript-Links
Inhaltsverzeichnis Grundlegende Anwendung eingebe...
Verwenden von jQuery zum Implementieren des Karusselleffekts
Was ich Ihnen heute zeige, ist die Verwendung von...
Ubuntu führt regelmäßig Beispielcode eines Python-Skripts aus
Originallink: https://vien.tech/article/157 Vorwo...
So gehen Sie mit dem Problem um, dass die Datei gelöscht wird, der Speicherplatz in Linux jedoch nicht freigegeben wird
Hintergrund des Problems Das Serverüberwachungssy...
Detaillierte Verwendung des Docker-Maven-Plugins
Inhaltsverzeichnis Docker-Maven-Plugin Schritte z...
So installieren Sie binäres MySQL unter Linux und knacken das MySQL-Passwort
1. Stellen Sie sicher, dass das System über die e...
Erfahrungsaustausch zur Optimierung von MySQL-Big-Data-Abfragen (empfohlen)
Ernsthafte MySQL-Optimierung! Wenn die MySQL-Date...
Tutorial zur Installation von mysql5.7.17 über yum auf redhat7
Die Linux-Betriebssysteme der RHEL/CentOS-Reihe v...
CSS3-Bézierkurven-Beispiel: Erstellen von Link-Hover-Animationseffekten
Wir verwenden animierte CSS3-Übergänge, um einen ...
Alibaba Cloud Nginx konfiguriert https, um ein Domänennamen-Zugriffsprojekt zu implementieren (grafisches Tutorial)
Schritt 1: Signieren Sie ein vertrauenswürdiges S...
So beheben Sie den 2002-Fehler bei der Installation einer MySQL-Datenbank in der Alibaba Cloud
Beim Installieren der Datenbank ist folgender Feh...