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
Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank
Um eine inkrementelle Sicherung der MySQL-Datenba...
Detaillierte Erläuterung zur Verwendung von Docker zum schnellen Bereitstellen der ELK-Umgebung (neueste Version 5.5.1)
Nachdem Sie Docker auf dem Linux-Server installie...
Was tun, wenn der von Docker Run gestartete Container hängt und Daten verliert?
Szenariobeschreibung In einem bestimmten System w...
setup+ref+reactive implementiert Vue3-Reaktionsfähigkeit
Das Setup wird zum Schreiben kombinierter APIs ve...
Erfahren Sie, wie Sie in fünf Minuten mit vue-cli3 ein Projekt erstellen (Anleitung für Anfänger)
Inhaltsverzeichnis 1. Erstellen Sie die Vue-Umgeb...
Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten
Inhaltsverzeichnis Verwendete APIs Einfaches Beis...
So konfigurieren Sie den Runner-Container in Docker
1. Erstellen Sie einen Runner-Container mk@mk-pc:...
Beispiel für die Bereitstellung von MySQL 8.0 mit Docker
1. Informationen zur Installation von Docker find...
Eine kurze Analyse der Unterschiede zwischen den häufig verwendeten Anweisungen v-if und v-show von Vue
Inhaltsverzeichnis Vorwort 1.v-show 2.v-wenn 3. D...
Lösung für Fehler 1290 beim Importieren von Dateidaten in MySQL
Fehlerszenario Verwenden Sie den MySQL-Befehl in ...
Praktisches Beispiel für verschachtelte Routen im vue.js Router
Inhaltsverzeichnis Vorwort Einrichten mit Vue CLI...
HTML+CSS zum Erstellen eines geschichteten Pyramidenbeispiels
Dieser Artikel stellt hauptsächlich das Beispiel ...
MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial
In diesem Dokument werden die Installations- und ...
Über das Problem der Offline-Installation des Docker-Pakets unter CentOS 8.4
Die verwendete virtuelle Maschine ist CentOS 8.4,...
Webdesign muss Zweck, Ideen, Gedanken und Beständigkeit haben
<br />Einleitung: Diese Idee kam mir, als ic...