• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] .autocomplete() mit <optgroup>'s

Moinsen Mik,

doooch, das klappt ... stelle bitte jQuery auf 2.0.2 und aktiviere jQuery UI 1.10.3 ... jsFiddle Update

Denn wenn Du in den Source von Deinem Muster schaust, siehst Du jquery-1.10.2 bzw. 1.11.4 (ui) ... häufig liegt es dann an der benutzten Version (Du hattest 1.7.2 drin).

Grüße
 
Vielen Dank, Steel! Aber die Versionen waren extra so. Das Projekt wo das rein muss ist etwas umfangreicher und bisher war kein Update für jQuery und UI nötig. Daher steht jQuery nur in v1.7.1 und UI nur in 1.8.11 zur Verfügung. Sorry, hätte ich direkt drauf hinweise müssen. Ich nahm nicht an, dass man vermutet, dass ich versehentlich diese Versionen im Fiddle eingestellt habe :)

Und nun ist es halt so, dass ich diese <optgroup>'s gern so im Code drin hätte, dass es mit diesen Versionen auch läuft.
Es käme jetzt auf den Aufwand an ob ich Update (das kostet mit Sicherheit mehrere Tage Testaufwand) oder ob die alte UI Version entsprechend modifiziert werden kann.

Dieses _create und _renderMenu kann man doch bestimmt auch in der alten Version selbst bauen, oder? Aber wie bindet man das dann ein?
Was mich irritiert ist, dass in dem Beispiel in der UI Doku nicht .autocomplete() sondern .catcomplete() verwendet wird. Was hat es damit auf sich, wo liegt genau der Unterschied und wie kann ich das in die alte Version adaptieren?
Leider findet man in der UI Doku zu diesen Extension Points keine Versionsangaben.

Ob mir dabei wohl jemand mit etwas mehr jQuery Erfahrung ein bisschen unter die Arme greifen könnte? Gibt 'ne Runde Kaffee! :very_drunk:
 
Danke euch beiden. Aber jetzt heißt das ja noch immer nicht .autocomplete() wenn ich das richtig sehe.

Bitte um Hilfe, wie ich das in meinen jetzigen Stand implementiere. Code sieht derzeit so aus:
HTML: 
jQuery(inp).autocomplete({
	create: function() {
		jQuery(inp).autocomplete('widget').removeClass('ui-widget-content').addClass('ui-ul-autocomplete-result');
		jQuery(inp).autocomplete('widget').removeClass('ui-corner-all');
	},
	select: function(event,autosuggdaten) {
		on_nimm_autosuggvorschlag(autosuggdaten);
	},
	source: function(request,response) {
		var requestIndex = 0;
		var datapostobj = ( data['formvars'] );
		jQuery.each(ref['request'],function(feldname,feldvalue) {
			if (feldvalue == '[EINGABE_VALUE]') { datapostobj[feldname] = request.term; }
			else { datapostobj[feldname] = feldvalue; }
		});
		jQuery.ajax({
			url:					data['script'],
			data:					datapostobj,		
			dataType:				'json',
			cache:					false,
			autocompleteRequest:	requestIndex += 1,
			success:				function(input,status) {
				if (this.autocompleteRequest === requestIndex) {
					response(input);
				}
			},
			error:					function() {
				if (this.autocompleteRequest === requestIndex) {
					response([]);
				}
			}
		});
	},
	minLength: parseInt(ref['mineing'],10)
});
 
Du kannst das auch "autocomplete" nennen - einfach das "custom.catcomplete" in der ersten JS-Zeile entsprechend austauschen.
 
Hammer, dank dir, Korbinian!
:snowman:

Eine Frage noch: wie kann ich die beiden Kommandos aus dem create: function() {} aktiv lassen?
Wäre wichtig für das Layout. Und ins _create: function() {} verschieben geht nicht, weil sie direkt auf das Feld inp wirken, das hab ich ja im _create: function() {} nicht. Wenn man das allgemein machen könnte wäre auch ok, das muss nicht feldbezogen sein. Aber wie schreibt man das dann?
 
Ach, doch so einfach :)
Danke dir.

Nun noch eine letzte Frage: wie kann ich von einem Element das der Benutzer auswählt auf sein übergeordnetes .ui-autocomplete-gruppe schließen? Ich hab im select: function(event,feldattribute) {...} folgendes versucht:

var selectbox = jQuery('[name="'+feldname+'"] option:selected').get(0);console.log('Feld '+selectbox);
=> Feld [object HTMLOptionElement]

console.log('DOM: '+jQuery('[name="'+feldname+'"] option:selected').prop("tagName"));
=> DOM: OPTION

bis hier hin OK und jetzt kommt mein Problem:
console.log('davor: '+jQuery('[name="'+feldname+'"] option:selected').prev().prop("tagName"));
liefert davor: undefined

console.log('davor: '+jQuery('[name="'+feldname+'"] option:selected').parent().prop("tagName"));
liefert davor: SELECT

Das Element davor (prev()) ist undefined und das Element darüber ist schon zu hoch, oder befinden sich die in _create: function() {...} erzeugten Elemente nicht unterhalb von select? Wie komme ich denn von meiner option aus gesehen an das nächst höher liegende Element mit der Class .ui-autocomplete-gruppe?
 
In der Darstellung der Gruppen kommt doch gar keine <optgroup> vor...? Die komplette Darstellung läuft doch über <li>s... in dem ganzen HTML kommt auch überhaupt gar kein <select> oder <option> vor.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben