jquery implementiert ein Suchfeld ähnlich wie Baidu
Als Entwickler ist das Suchfeld auch eine unverzichtbare Funktion bei der Entwicklung einer Website. Kürzlich muss ich bei der Arbeit ein Suchfeld erstellen, ähnlich dem Suchfeld von Baidu. In diesem Artikel werden wir Ihnen etwas über Jquery vorstellen Implementieren Sie ein ähnliches Baidu-Suchfeld.
Es müssen zwei Funktionen erreicht werden:
1. Geben Sie das Schlüsselwort ein und zeigen Sie die passende Dropdown-Liste an
2. Wählen Sie das passende Element aus und suchen Sie nach verwandten Inhalten
Diese Suchleiste wird auch häufig auf allgemeinen E-Commerce-Websites verwendet. Analysieren Sie zunächst die Funktionsimplementierung und zeigen Sie sofort die Liste der passenden Artikel an "-Ereignis und senden Sie dann eine asynchrone Anforderung an den Hintergrund. Die Daten werden auf der Seite angezeigt. Verwenden Sie die Maus oder die Auf- und Ab-Tasten, um passende Elemente auszuwählen, und klicken Sie auf „Suchen“ oder die „Enter“-Taste, um nach bestimmten Ergebnissen zu suchen. Hier werden zwei asynchrone Anfragen verwendet, die erste fordert die passenden Elemente an und die zweite fordert die Suchergebnisse an. Die Überwachung von Tastatur-, Maus- und Eingabefeldereignissen muss ebenfalls berücksichtigt werden, d. h. die Anpassung an verschiedene ähnliche Anforderungen ist immer noch schwierig.
1.html und css
<body>
<div id="search-form"></div>
</body>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;border:none;}
body {
font-family: "microsoft yahei" !important;
background-color: #FDFFE0;
}
:focus {
outline: none;
}
#search-form {
position: relative;
top: 50px;
display: inline;
}
</style>2. CSS- und js-Dateien importieren
Da der Blog keine Dateien hochladen kann, können Sie zu meinem Git gehen: http:/ /git Es gibt eine vollständige Projektdatei auf .oschina.net/manliu.com/search_frame
3. Seitenreferenz js
<script type="text/javascript">
var proposals = ['百度1', '百度2', '百度3', '百度4', '百度5', '百度6', '百度7','17素材网','百度','新浪'];
$(document).ready(function(){
$('#search-form').complete({
searchIn:function(val){//传入输入值，返回匹配值
/* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
return reg.test(val); */
var word = "^"+val+".*";
var rs = [];
$.each(proposals,function(i,n){
if(n.match(word)){
rs.push(n);
}
});
return rs;
},
width:400,
height: 30,
submitIn: function(text){//搜索选定的值
alert(text);
}
});
});
</script>Die searchIn-Methode wird hier verwendet, um passende Elemente zurückzugeben. In der Regel wird eine asynchrone Anforderung definiert, die Daten aus dem Hintergrund abruft und ein Array zurückgibt. Bei komplexen Anforderungen muss der Quellcode geändert werden, um nach passenden Ergebnissen zu suchen, und kann im Allgemeinen asynchron oder synchron angefordert werden.
Der obige Inhalt ist ein Tutorial zur Abfrage, um ein Suchfeld ähnlich wie Baidu zu implementieren. Ich hoffe, es kann allen helfen.
Verwandte Empfehlungen:
Css zum Erstellen eines gut aussehenden Suchfelds
So verwenden Sie Js, um die Eingabeaufforderung des Baidu-Suchfelds zu implementieren Funktion
JavaScript implementiert ein nachgeahmtes Youku-Suchfeld
Das obige ist der detaillierte Inhalt vonjquery implementiert ein Suchfeld ähnlich wie Baidu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1672
14
1428
52
1332
25
1277
29
1257
24
Nach 2 Monaten kann der humanoide Roboter Walker S Kleidung falten
Apr 03, 2024 am 08:01 AM
Herausgeber des Machine Power Report: Wu Xin Die heimische Version des humanoiden Roboters + eines großen Modellteams hat zum ersten Mal die Betriebsaufgabe komplexer flexibler Materialien wie das Falten von Kleidung abgeschlossen. Mit der Enthüllung von Figure01, das das multimodale große Modell von OpenAI integriert, haben die damit verbundenen Fortschritte inländischer Kollegen Aufmerksamkeit erregt. Erst gestern veröffentlichte UBTECH, Chinas „größter Bestand an humanoiden Robotern“, die erste Demo des humanoiden Roboters WalkerS, der tief in das große Modell von Baidu Wenxin integriert ist und einige interessante neue Funktionen aufweist. Jetzt sieht WalkerS, gesegnet mit Baidu Wenxins großen Modellfähigkeiten, so aus. Wie Figure01 bewegt sich WalkerS nicht umher, sondern steht hinter einem Schreibtisch, um eine Reihe von Aufgaben zu erledigen. Es kann menschlichen Befehlen folgen und Kleidung falten
Baidu Apollo bringt Apollo ADFM auf den Markt, das weltweit erste große Modell, das autonomes Fahren der Stufe L4 unterstützt
Jun 04, 2024 pm 08:01 PM
Am 15. Mai veranstaltete Baidu Apollo den Apollo Day 2024 im Wuhan Baidu Carrot Auto Robot Zhixing Valley und demonstrierte umfassend Baidus große Fortschritte beim autonomen Fahren in den letzten zehn Jahren, die auf großen Modellen basierende Technologiesprünge und eine neue Definition der Passagiersicherheit mit sich brachten Baidu, das weltweit größte autonome Fahrzeugbetriebsnetzwerk, hat autonomes Fahren sicherer gemacht als menschliches Fahren. Dadurch werden sicherere, komfortablere, umweltfreundlichere und kohlenstoffärmere Reisemethoden vom Ideal zur Realität. Wang Yunpeng, Vizepräsident der Baidu Group und Präsident der Intelligent Driving Business Group, sagte vor Ort: „Unsere ursprüngliche Absicht, autonome Fahrzeuge zu bauen, besteht darin, den wachsenden Wunsch der Menschen nach besserem Reisen zu befriedigen. Die Zufriedenheit der Menschen ist unsere treibende Kraft. Denn Sicherheit, So schön, wir freuen uns, es zu sehen
So durchsuchen Sie die Ressourcen anderer Personen auf Alibaba Cloud Disk
Mar 30, 2024 am 10:31 AM
Alibaba Cloud Disk, dieses beliebte Speichertool, hilft uns nicht nur bei der effizienten Verwaltung persönlicher Ressourcen, sondern bietet auch viele praktische Funktionen. Daher können viele Benutzer bei der Suche möglicherweise keine Cloud-Festplattenressourcen finden und möchten daher alle Ressourcen auf der gesamten Festplatte durchsuchen. Nachfolgend wird der Herausgeber dieser Website diese Frage ausführlich beantworten und die spezifische Suchmethode mitteilen Wenn Sie es wissen möchten, kommen Sie bitte vorbei und folgen Sie diesem Artikel, um mehr zu erfahren! So durchsuchen Sie die Ressourcen anderer Personen in Alibaba Cloud Disk 1. Suchen Sie zunächst den spezifischen Pfad der Ressourcendatei im Ordnerverzeichnis von Alibaba Cloud Disk, um den entsprechenden Ordner zu finden. 2. Nutzen Sie anschließend die Dateisuchfunktion und geben Sie die gesuchten Schlüsselwörter ein, um den relevanten Dateiinhalt zu finden. 3. Dann teilen wir den Link mit anderen, um ihn direkt zu finden und herunterzuladen
Baidu Robin Li leitete ein Team, das PetroChina besuchte, um die Erkenntnisse der Öl- und Gasindustrie zu besprechen
May 07, 2024 pm 06:13 PM
Laut Nachrichten dieser Website vom 7. Mai besuchte Robin Li, Gründer, Vorsitzender und CEO von Baidu, am 6. Mai mit einem Team die China National Petroleum Corporation (im Folgenden als „PetroChina“ bezeichnet) in Peking und traf sich mit Direktoren von Dai Houliang, Vorsitzender der China National Petroleum Corporation und Parteisekretär, führte Gespräche. Die beiden Parteien führten einen intensiven Austausch über die Stärkung der Zusammenarbeit und die Förderung der tiefen Integration der Energiewirtschaft mit digitaler Intelligenz. PetroChina wird den Aufbau einer digitalen China Petroleum Corporation beschleunigen, die Zusammenarbeit mit der Baidu Group stärken, die tiefgreifende Integration der Energiewirtschaft mit digitaler Intelligenz fördern und einen größeren Beitrag zur Gewährleistung der nationalen Energiesicherheit leisten. Robin Li sagte, dass die „intelligente Emergenz“ und die Kernfähigkeiten des Verstehens, der Generierung, der Logik und des Gedächtnisses, die große Modelle zeigen, einen größeren Raum für die Vorstellungskraft für die Kombination von Spitzentechnologie und Öl- und Gasgeschäft eröffnet hätten. Stets
Deepseek Web Version Eingang Deepseek Offizielle Website Eingang
Feb 19, 2025 pm 04:54 PM
Deepseek ist ein leistungsstarkes Intelligent -Such- und Analyse -Tool, das zwei Zugriffsmethoden bietet: Webversion und offizielle Website. Die Webversion ist bequem und effizient und kann ohne Installation verwendet werden. Unabhängig davon, ob Einzelpersonen oder Unternehmensnutzer, können sie massive Daten über Deepseek problemlos erhalten und analysieren, um die Arbeitseffizienz zu verbessern, die Entscheidungsfindung zu unterstützen und Innovationen zu fördern.
Es wird berichtet, dass die chinesische Version des Mobiltelefons „Search in Circle' der Samsung Galaxy S24-Serie die Google-Suche unterstützen wird
Jun 01, 2024 am 09:54 AM
Laut Nachrichten vom 31. Mai verbreitete der Blogger @ibinguniverse heute die Nachricht, dass die chinesische Version des Mobiltelefons „Search in Circle“ der Samsung Galaxy S24-Serie die Google-Suche unterstützen wird. Den konkreten Startzeitpunkt gab der Blogger nicht bekannt. Laut der vorherigen Einführung von Samsung wurde die Samsung Galaxy S24-Serie mit vielen hochrangigen KI-Funktionen, KI-basierten praktischen Funktionen wie Eingabe, Übersetzung, Rekorder, Notizen und Kameras ausgestattet, um Benutzern ein bequemeres und effizienteres Gesamterlebnis zu bieten Erfahrung. Anders als bei der Überseeversion werden die meisten KI-Funktionen der Samsung Galaxy S24-Serie von inländischen Herstellern wie Baidu bereitgestellt. Wie bereits berichtet, integriert Galaxy AI mehrere Funktionen des großen Baidu Wenxin-Modells umfassend, wodurch endseitige Anruf- und Übersetzungsfunktionen sowie intelligente Zusammenfassungen durch generative KI bereitgestellt werden können.
Einführung in den Erhalt von Baidu-Xiyang-Muscheln
Mar 28, 2024 am 09:11 AM
Es gibt viele Benutzer in Xirang, die nicht wissen, wo die Muscheln sind und wie sie sie bekommen können. Einige Spieler haben mehrere Stunden lang gesucht, können sie aber immer noch nicht finden. Nachfolgend erfahren Sie, wie Sie Baidu-Xirang-Muscheln erhalten . Kommen Sie vorbei. So erhalten Sie Baidu Xirang Shell 1. Zuerst müssen wir zur Community und dann zum Ort im Bild unten kommen. 2. Wählen Sie hier das Ziel aus und betreten Sie die 188. Etage. 3. Nachdem Sie die 188. Etage betreten haben, sehen Sie diese Aufforderung, wenn Sie herumlaufen. Klicken Sie einfach auf „I Got It“. 4. Der Standort der Muschel ist möglicherweise etwas schwierig zu finden. Direkt hinter dem Aufzug 188 befindet sich ein kleiner leuchtender Punkt, bei dem es sich um die Muschel handelt. 5. Sie müssen einen VR-Controller verwenden, um Muscheln aufzunehmen. Klicken Sie einfach auf die Muschel. Einlösungsmethode 1. Klicken Sie zunächst auf das Symbol „Einstellungen“ in der oberen rechten Ecke der Seite und wählen Sie „
Baidu Wenxin Big Model 4.0 Turbo steht Unternehmen offen und bietet einen Preisnachlass von 70 % im Vergleich zur allgemeinen Version von Wenxin Yiyan 4.0
Jul 11, 2024 pm 07:14 PM
Laut Nachrichten dieser Website vom 5. Juli hat Baidu am 28. Juni auf der WAVESUMMIT Deep Learning Developer Conference die neue Wenxin Large Model 4.0 Turbo-Version veröffentlicht. Im Vergleich zum Wenxin-Großmodell Version 4.0 verfügt Turbo über eine schnellere Reaktionsgeschwindigkeit und stärkere Abruffähigkeiten. Auf der heutigen Weltkonferenz für künstliche Intelligenz 2024 sagte Baidu-Vizepräsident Xie Guangjun, dass Wenxiniyan 4.0 Turbo offiziell vollständig für Unternehmen geöffnet wurde. Der Preis beträgt 0,03 Yuan/tausend Token für den Input und 0,06 Yuan/tausend Token für den Output : 1 Basierend auf den Eingabe- und Ausgabelängenstatistiken beträgt die Preisreduzierung der allgemeinen Version von Wenxin Yiyan 4.0 „Baidu sagte, dass das Wenxin-Großmodell auf der Grundlage des leistungsstarken Basis-Großmodells weitere Innovationen hervorbringt.“
