✔ [jQuery] Autocomplete Frage

[wavetraxx]

Hallo zusammen

ich benutze das Autocomplete auf einer Webseite und funktioniert einwandfrei.

Nun wollte ich das Autocomplete erweitern auf URL Redirect. Also wenn man auf eine Autocomplete Auswahl klickt, dass man direkt weitergeleitet wird.

Was ich am Anfang aufrufe:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

So funktioniert es noch (ohne URL):

  <script>
  $(document).ready(function(){
    var data = "Item1,Item2,Item3".split(",");
$("#ajaxSearch_input").autocomplete(data);
  });
  </script>

Und so NICHT mehr:

  <script>
  $(document).ready(function(){
var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("#ajaxSearch_input").autocomplete(data, {
  formatItem: function(item) {
    return item.text;
  }
}).result(function(event, item) {
  location.href = item.url;
});

  </script>

Das Autocomplete funktioniert so gar nicht mehr (Code entspricht aber OriginalCode).

Code habe ich von hier: http://docs.jquery.com/Plugins/Autocomplete

Habe ich irgendwas übersehen? Oder was falsch gemacht?

 

[CPoly]

Ich hab den Code mal etwas anders formatiert.

$(document).ready(function(){
	var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];

	$("#ajaxSearch_input")
	.autocomplete(data, {
		formatItem: function(item) {
			return item.text;
		}
	})
	.result(function(event, item) {
		location.href = item.url;
});

Folgendes fällt auf:
Für die letzte Funktion fehlt offensichtlich eine schließende geschweifte Klammer, eine Runde Klammer und ein Semikolon.
Nächstes mal selber formatieren oder in die Fehlerkonsole gucken (oder eventuell auf eine IDE umsteigen).

$(document).ready(function(){
	var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];

	$("#ajaxSearch_input")
	.autocomplete(data, {
		formatItem: function(item) {
			return item.text;
		}
	})
	.result(function(event, item) {
		location.href = item.url;
	});//DAS HAT ALLES GEFEHLT******
});

 

[wavetraxx]

Hallo CPoly

hmmm... da habe ich anscheinend total übersehen. Danke vielmals. Funktioniert nun.

Evtl. kannst Du mir nochmals weiterhelfen.

Ich habe nun versucht bei einem Formular ein 2tes Autocomplete einzubauen.

Zurzeit nimmt er mir nur den ersten Autocomplete Script, das 2te Inputfeld reagiert nicht auf Autocomplete, obwohl ich das 2te input definiert habe.

Hast Du mir dazu noch einen Tipp? Idee?

$(document).ready(function(){
    var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
 
    $("#ajaxSearch_input")
    .autocomplete(data, {
        formatItem: function(item) {
            return item.text;
        }
    })
    .result(function(event, item) {
        location.href = item.url;
    });

    var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
 
    $("#Input2")
    .autocomplete(data, {
        formatItem: function(item) {
            return item.text;
        }
    })
    .result(function(event, item) {
        location.href = item.url;
    });

});

Ich habe auch schon versucht das ganze in 2 eigene <script>$(document).ready(function(){... einzubauen. Leider ohne Erfolg.

Da die zwei # Inputs die gleiche Funktion haben (sind aber an verschieden Stellen der Webseite), könnte man diese auch zusammefassen? Im Sinn von:

    $("#ajaxSearch_input,#Input2")

 

[CPoly]

Bei mir funktionieren beide. Existiert auch wirklich ein Textfeld mit der ID "Input2" (Groß-/Kleinschreibung beachten!)

Ansonsten solltest du nicht unbedingt zwei Variablen mit gleichem Namen definieren. Zumal Sie in dem Fall sogar identischen Inhalt haben.

Da die zwei # Inputs die gleiche Funktion haben (sind aber an verschieden Stellen der Webseite), könnte man diese auch zusammefassen? Im Sinn von:

    $("#ajaxSearch_input,#Input2")

Das ist möglich und sinnvoll. Funktioniert auch bei mir.

 

[wavetraxx]

Funktioniert, Danke vielmals.