StackOverflow Tags

[Vince42]

Moin,

ich möchte eine Eingabehilfe in JavaScript programmieren, welche die Funktionalität nachbildet, die man bei StackOverflow sieht, wenn man in einer neuen Frage die Tags unterhalb der Frage eingibt. Dort werden je nach eingegebenen Buchstaben mehrere Tags vorgeschlagen und gleichzeitig zu den Tags auch noch ein erläuternder Text.

Wie gehe ich da am besten vor? Gibt es die JavaScript-Funktionen von StackExchange irgendwo frei einsehbar? Wenn dem nicht so sein sollte: gibt es bereits ähnliche Implementierungen? Wenn ja, wo könnte ich die finden?

[Christian Marquardt]

Wie gehe ich da am besten vor? Gibt es die JavaScript-Funktionen von StackExchange irgendwo frei einsehbar?

Sicherlich im Quelltext der Seite bzw. der entsprechenden JS-Datei

[Vince42]

Ich bin leider nicht routiniert in der Analyse von Webseiten und JavaScript-Code. Wenn ich mir den Quellcode der Frageseite von askubuntu.com anschaue, sehe ich in dem [URL=https://pastebin.com/gTmq4TUn]HTML-Quellcode[URL] (leider zu groß, um ihn hier zu posten) ein paar Stellen, die auf das Tags-Input-Feld hinzuweisen scheinen.

Der wesentliche Code-Hinweis ist vermutlich in Zeile 79 f. zu finden:

StackExchange.using.setCacheBreakers({"js/prettify-full.en.js":"b47dd9ab228b","js/moderator.en.js":"f2fc83d763a4","js/full-anon.en.js":"fe6add9a05d4","js/full.en.js":"1d2e2e582209","js/wmd.en.js":"10c4126bafd9","js/third-party/jquery.autocomplete.min.js":"d3b8fa7fdf74","js/third-party/jquery.autocomplete.min.en.js":"","js/mobile.en.js":"cbcfabbe625c","js/help.en.js":"a56fdf9b9ff2","js/tageditor.en.js":"17e735d9a8ba","js/tageditornew.en.js":"13346b6d53a4","js/inline-tag-editing.en.js":"a4fa53d308ae","js/revisions.en.js":"2faaeaae2529","js/review.en.js":"9acb34689d8d","js/tagsuggestions.en.js":"ddb0e41afe26","js/post-validation.en.js":"59b70bcebc7f","js/explore-qlist.en.js":"e71f14781288","js/events.en.js":"abbbf15865e5","js/keyboard-shortcuts.en.js":"85a62252fd40","js/external-editor.en.js":"b46c950d6c5a","js/adops.en.js":"9a6a7812a212"});

Der Code scheint dann in Zeile 516 ff. und 593 ff. genutzt zu werden.

Ich habe versucht mir den Quelltext von js/tagsuggestions.en.js anzeigen zu lassen, aber weder askubuntu.com/js/tagsuggestions.en.js noch askubuntu/questions/ask/js/tagsuggestions.en.js waren valide URLs.

Bin ich auf der richtigen Fährte? Kann ich mir den Quelltext im Browser anzeigen lassen? Gibt es Tools, die eine solche Analyse besser unterstützen als die Quelltextsuche?

[fanderlf]

Also erstens glaub ich, dass man Quelltext den jemand anderes geschrieben hat und der vermutlich minifiziert ist nicht unbedingt analysieren sollte, noch glaube ich dass Du APIs die sie nicht öffentlich anbieten für Dich verwenden solltest. Entweder Stackoverflow hat so eine API und man kann danach suchen (glaube ich eher nicht) oder man sollte die Finger davon lassen.

Was spricht denn dagegen sich irgendwo einen Wortindex herunterzuladen und damit selbst einen kleinen Service zu bauen, der einem dann die Wörter zurück gibt, die mit den jeweiligen Buchstaben anfangen?

[Vince42]

Okay, dann gehe ich auch davon aus, daß die Suche nach dem Beispielcode von StackExchange nicht von Erfolg gekrönt sein wird.

Es spricht absolut nichts dagegen, sich einen beliebigen Wortindex herunterzuladen und die Funktionalität nachzuprogrammieren. Das war exakt die Frage, die ich meinte gestellt zu haben, aber offenbar fehlen mir die Fähigkeiten mein Anliegen gut genug zu formulieren.

Ich gehe weiterhin davon aus, daß niemand bisher in einem beliebigen JS-Framework eine nahezu identische Funktion einmal gesehen hat, sonst hätte eine Antwort vermutlich "klar, guck Dir mal das Dojo-Widget Xyz an" geheißen.

Vielen Dank für Deine Antwort, meine Frage ist beantwortet und meine Suche beendet.

[Ralf Jansen]

Autosuggest und Autocomplete Implementierungen gibt es reichlich. Mit den Stichworten solltest du auch reichlich finden. Ein"wie in Stackoverflow" also einschließlich UI und serverseitige bzw. clientseitige Implementierung eines Lookups (du hast nicht spezifiziert wo du das brauchst) eher nicht. Die finde ich viel zu speziell.

[Wernfried]

In einer Applikation habe ich es so gemacht:

$("#newUser").on("input", function() {		
	if ( $("#newUser").val().length <= 1 ) $("#users").empty(); // Keine Suche wenn nur 1 Buchstabe eingetippt wird
	if ( $("#newUser").val().length > 1 ) {			
		$.getJSON("UserSearch?u=" + $("#newUser").val(), function(result) {
			if ( $("#users option").length == 0 ) {					
				$(result).each(function() {
					$("#users").append("<option value=" + this.u + ">" + this.u + " (" + this.dn + ")</option>");
				});
			} else {
				if ( $("#users option").length > result.length ) {
					var userList = [];
					$(result).each(function() {
						userList.push(this.u);
					});
					$("#users option").each(function () {						
						if ( $.inArray($(this).val(), userList) == -1 ) $(this).remove();
					});						
				} else if ( $("#users option").length < result.length ) {
					var userList = [];
					$("#users option").each(function () {	
						userList.push($(this).val());
					});
					$(result).each(function() {
						if ( $.inArray(this.u, userList) == -1 ) $("#users").append("<option value=" + this.u + ">" + this.u + " (" + this.dn + ")</option>");
					});												
				}
			}
		});
	}
});

$("#newUser") ist ein einfaches <input> element. Über die Abfage auf "UserSearch?u=" hole ich die Vorschläge vom Webserver.

Gruss