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
Die Eltern-Kind-Knoten-Zuordnung des El-Tree-Mehrfachauswahlbaums (Kontrollkästchen) des Elements ist nicht zugeordnet
Streng geprüfte Attribute Das offizielle Dokument...
Beispiel für eine Methode zum Festlegen von MySQL-Fremdschlüsseln
1. Methode zum Festlegen des Fremdschlüssels 1. U...
Grundlegendes Prozessmanagement und Analyse der Umgebungszusammensetzung bei Linux-Betrieb und -Wartung
Inhaltsverzeichnis 1. Grundlegender Überblick übe...
JavaScript-Farbbetrachter
In diesem Artikelbeispiel wird der spezifische Ja...
Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach
Swiper ist ein mit reinem JavaScript erstelltes P...
Galeriefunktion durch natives Js implementiert
Inhaltsverzeichnis Der erste Der Zweite Native Js...
Zusammenfassung des Wissens über MySql-Speicher-Engines und Indizes
Speicher-Engine Was ist eine Datenbank-Speicher-E...
Ein Beispiel für die Berechnungsfunktion calc in CSS im Website-Layout
calc ist eine Funktion in CSS, die zum Berechnen ...
Gründe und Lösungen für das Scheitern dynamisch hinzugefügter Routing-Seiten in Vue beim Aktualisieren
Inhaltsverzeichnis Problembeschreibung Szenario S...
So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben
Inhaltsverzeichnis Überblick Methode 1: Parameter...
Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation
Mysql ist eine beliebte und einfach zu bedienende...
Deaktivieren Sie die automatische Vervollständigung in HTML, damit der Verlauf nicht angezeigt wird
Das Eingabefeld zeigt beim Eingeben von Inhalten i...
So scrollen Sie manuell durch Protokolle im Linux-System
Die Protokollrotation ist eine sehr gängige Funkt...
Lösung zur Konvertierung in Inline-Styles in CSS (css-inline)
Sprechen Sie über die Szene E-Mail senden Einbett...
HTML+CSS zum Hinzufügen eines Löschkreuzes und einer Bildlöschschaltfläche in der oberen rechten Ecke des Bildes
Zur Aufzeichnung: Es kann in Zukunft verwendet we...