[jquery] jquery load / autocomplete

[Split1989]

Hallo leute
bin gerade dabei einwenig meine Kentnisse zu erweitern.
Habe dabei ein Problem. Mochte ein Iputfeld mit autocomplete ausstatten.
Die werte für das input feld sollen nach jedem eingegebenen zeichen nachgeladen werden.

Autocomplete ansich functioniert jetzt schon aber das nachladen leider nicht.

<script>
  $(document).ready(function() {
    $("input#inp").autocomplete({
    source: ["Klamm", "eBesucher", "Hamburg", "Köln"]
});
  });
  </script>
<input id="inp" />

jetzt soll ("Klamm", "eBesucher", "Hamburg", "Köln") immer nachgeladen werden.

Das soll geschehen indem eine .php mit dem aktuellen wert von "inp" aufgerufen wird und deren Inhalt soll ausgelesen werden.

ort.php?o=ham gibt z.B. "Ham Street","Ham(Somme)","Ham-sur-Heure","Ham-sur-Sambre","Ham-en-Artois","Hamburg" aus und dass soll dann halt oben verwendet werden.

habe mir schon die function load angeschaut aber leider haben all meine versuche keine Ergebnisse geliefert

hoffe mir kann da jmd helfen

 

[theHacker]

Du findest auf der jQueryUI-Seite Beispielcode, wie du eine externe Datenquelle verwenden kannst:
https://jqueryui.com/demos/autocomplete/#remote

 

[Split1989]

danke schonmal für die hilfe ...
verstehe da noch nicht ganz alles ...

habe mir da eine eine source hergenommen und versucht das so hinzubekommen wie ich es brauche leider klappt es noch nicht ganz so wie ich es will.

generiere mir jetzt mithilfe von php eine .xml was auch gut funktioniert und diese wird auch eingelesen aber es funktioniert nicht wenn ich den inhalt dess input feldes auslesen möchte um eine neue .xml zu "generieren"

mein code sieht zur zeit so aus

<meta charset="utf-8">

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>


	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).scrollTop( 0 );
		}

		$.ajax({
			url: "ort.php?o="+document.getElementById('birds').value,
			dataType: "xml",
			success: function( xmlResponse ) {
				var data = $( "geoname", xmlResponse ).map(function() {
					return {
						value: $( "name", this ).text() + ", " +
							( $.trim( $( "loc", this ).text() ) || "(unknown country)" ),
						id: $( "geonameId", this ).text()
					};
				}).get();
				$( "#birds" ).autocomplete({
					source: data,
					minLength: 0,
					select: function( event, ui ) {
						log( ui.item ?
							"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
							"Nothing selected, input was " + this.value );
					}
				});
			}
		});
	});

    function getLink() {
		    var FilePath = document.getElementById('birds');
		    alert('FilePath.value: ' + FilePath.value);
		}
	</script>



<div class="demo">

<div class="ui-widget">
	<label for="birds">matches: </label>
	<input onchange="getLink()" id="birds" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->

 

[theHacker]

[...] es funktioniert nicht [...]

Ich liebe detailierte Problembeschreibungen

Guck dir halt mal deinen Code an. Du hast einen AJAX-Request, der bei Rückkehr dein AutoComplete-Teil initialisiert. Du merkst also doch schon hier, dass die Logik total falsch is.

Es sollte so sein:
Du initialisierst das AutoComplete-Teil so, dass es bei Veränderung jedes Mal einen AJAX-Request sendet.

Und warum du mit document.getElementById() irgendwas machst, versteh ich auch nicht. Du nimmst doch grade jQuery, um sowas zu vermeiden.

 

[tleilax]

Zudem ist XML an dieser Stelle wohl etwas Overkill. Gib doch einfach JSON zurück und spar Dir die ganze clientseitige Parserei...