Web-Frontend
js-Tutorial
Implementierung einer automatischen Suchschlüsselwort-Matching-Funktion basierend auf jQuery_jquery
Implementierung einer automatischen Suchschlüsselwort-Matching-Funktion basierend auf jQuery_jquery
Heute schauen wir uns ein einfaches Beispiel für den automatischen Keyword-Abgleich basierend auf JQuery an. Ich hoffe, der Artikel wird Ihnen hilfreich sein.
Beispiel 1
Im Projekt muss der Benutzer manchmal eine Stadt auswählen, aber es gibt zu viele Städte und die Auswahl ist für den Benutzer unpraktisch. Daher wird ein Eingabefeld bereitgestellt, in das der Benutzer die chinesischen Schriftzeichen oder die Pinyin-Abkürzung eingeben kann Stadt. Das Ergebnisdiagramm sieht wie folgt aus:
Das Ergebnis nach der Eingabe von Pinyin ist wie folgt:
Der Implementierungscode lautet wie folgt:
<html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "utf-8" ><script type="text/javascript" src="jquery.min.js"></script><body><input id="searchCityName" style="width: 100%;" type="text" placeholder="中文 / 拼音首字母" />
<ul>
<li pinyin="bj" cityname="北京"><a href="/cityBranch/12.html">北京 </a></li>
<li pinyin="dl" cityname="大连"><a href="/cityBranch/14.html">大连 </a></li>
<li pinyin="sh" cityname="上海"><a href="/cityBranch/13.html">上海 </a></li>
<li pinyin="jn" cityname="济南"><a href="/cityBranch/15.html">济南 </a></li>
<li pinyin="gz" cityname="广州"><a href="/cityBranch/17.html">广州 </a></li>
<li pinyin="jh" cityname="金华"><a href="/cityBranch/18.html">金华 </a></li>
<li pinyin="wh" cityname="武汉"><a href="/cityBranch/19.html">武汉 </a></li>
<li pinyin="nj" cityname="南京"><a href="/cityBranch/20.html">南京 </a></li>
<li pinyin="sz" cityname="深圳"><a href="/cityBranch/22.html">深圳 </a></li>
<li pinyin="tj" cityname="天津"><a href="/cityBranch/21.html">天津 </a></li>
<li pinyin="cd" cityname="成都"><a href="/cityBranch/24.html">成都 </a></li>
<li pinyin="ly" cityname="临沂"><a href="/cityBranch/25.html">临沂 </a></li>
<li pinyin="cc" cityname="长春"><a href="/cityBranch/26.html">长春 </a></li>
<li pinyin="hz" cityname="杭州"><a href="/cityBranch/27.html">杭州 </a></li>
<li pinyin="nb" cityname="宁波"><a href="/cityBranch/28.html">宁波 </a></li>
<li pinyin="qd" cityname="青岛"><a href="/cityBranch/29.html">青岛 </a></li>
<li pinyin="sy" cityname="沈阳"><a href="/cityBranch/33.html">沈阳 </a></li>
</ul>
<script>
function searchCity() {
var searchCityName = $("#searchCityName").val(); if (searchCityName == "") {
$("ul li").show();
} else {
$("ul li").each( function() {
var pinyin = $(this).attr("pinyin"); var cityName = $(this).attr("cityName"); if (pinyin.indexOf(searchCityName) != -1
|| cityName.indexOf(searchCityName) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
$('#searchCityName').bind('input propertychange', function() {
searchCity();
}); </script></body></html>
Hinweis:
1. Wenn ich den Listenwert im Eingabefeld in Echtzeit abfragen möchte, fällt mir als erstes die Verwendung von Ajax ein, aber nachdem ich darüber nachgedacht habe, habe ich festgestellt, dass der Wert der Liste im Grunde feststeht Warum nicht alles auf einmal laden? Der Hintergrundcode wurde so geändert, dass alle Stadtdetails geladen werden.
2. Wenn sich der Wert im Eingabefeld ändert, muss ein Ereignis ausgelöst werden. Meine erste Idee war, onchange zu verwenden, aber tatsächlich bedeutet onchange, dass sich der Wert des Eingabefelds ändert und das Eingabefeld den Fokus verliert, also habe ich es schließlich verwendet keyup. Beim Testen auf dem Computer gibt es kein Problem mit der Tastenkombination, auf WeChat zeigt sie jedoch keine Wirkung. Also wurde keyup durch das finale bind('input propertychange', function() {} .
ersetzt
3. Bei der Beurteilung, ob die Stadtzeichen die Zeichen im Eingabefeld enthalten, habe ich die Funktion „enthält“ verwendet. Beim Testen unter Firefox gab es keine Probleme, sie zeigte jedoch keine Wirkung auf Chrome- und WeChat-Clients. Abschließend wird „contains“ durch „indexOf“ ersetzt.
Beispiel 2: Verwenden Sie zum Implementieren das Plug-in jquery.autocomplete.
1. Verwenden Sie die Einstellungen
Startseite, Sie müssen den JS-Code des Plugins in Ihr eigenes Projekt einbetten.
<script src="jquery.js" type="text/javascript"><!--mce:0--></script><script src="jquery.autocomplete.js" type="text/javascript"><!--mce:1--></script>
2. So verwenden Sie
Fügen Sie die AutoComplete-Funktion zum Eingabeformular hinzu, in dem automatische Matching-Eingabeaufforderungen implementiert werden sollen.
<input id="query" name="q" />
初始化 AutoComplete 对象，确保正确加载 DOM 对象，否则IE下的用户可能会出现错误。
$('#query').autocomplete({ serviceUrl: 'service/autocomplete.ashx', // Page for processing autocomplete requests minChars: 2, // Minimum request length for triggering autocomplete delimiter: /(,|;)\s*/, // Delimiter for separating requests (a character or regex) maxHeight: 400, // Maximum height of the suggestion list, in pixels width: 300, // List width zIndex: 9999, // List's z-index deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 ms. params: { country: 'Yes'}, // Additional parameters onSelect: function(data, value){ }, // Callback function, triggered if one of the suggested options is selected, lookup: ['January', 'February', 'March'] // List of suggestions for local autocomplete });
Führen Sie einen Stichwort-Eingabeaufforderungsabgleich basierend auf den Eingabeinformationen im Textformular durch.
{ query:'Li', // Original request suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // List of suggestions data:['LR','LY','LI','LT'] // Optional parameter: list of keys for suggestion options; used in callback functions. }
jQuery AutoComplete 插件支持 on/off功能，从而控制效果的开关。
var ac = $('#query').autocomplete({ /*parameters*/ }); ac.disable(); ac.enable(); ac.setOptons({ zIndex: 1001 });
3. Legen Sie den Leistungsstil fest
Verwenden Sie abschließend Div und CSS, um den Leistungseffekt zu verschönern.
<div class="autocomplete-w1"><div id="Autocomplete_1240430421731" class="autocomplete" style="width: 299px;"><div><strong>Li</strong>beria</div><div><strong>Li</strong>byan Arab Jamahiriya</div><div><strong>Li</strong>echtenstein</div><div class="selected"><strong>Li</strong>thuania</div></div></div> .autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }.autocomplete .selected { background:#F0F0F0; }.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }.autocomplete strong { font-weight:normal; color:#3399FF; } jQuery AutoComplete
Bei den beiden oben genannten Beispielen geht es um die Funktion zum automatischen Suchschlüsselwortabgleich von jQuery. Ich hoffe, dass sie für das Lernen aller hilfreich sein wird.
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
1389
52
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Entmystifizieren JavaScript: Was es tut und warum es wichtig ist
Apr 09, 2025 am 12:07 AM
JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.
Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt?
Apr 04, 2025 pm 05:09 PM
Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...
Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen?
oder:
Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird?
Apr 04, 2025 pm 05:36 PM
Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...
Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe?
Apr 04, 2025 pm 05:12 PM
Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
Ist JavaScript schwer zu lernen?
Apr 03, 2025 am 12:20 AM
JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.
So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung?
Apr 04, 2025 pm 02:06 PM
Erforschen Sie die Implementierung der Funktion des Bedien- und Drop-Einstellungsfunktion der Panel ähnlich wie VSCODE im Front-End. In der Front-End-Entwicklung wird VSCODE ähnlich wie VSCODE implementiert ...
