# jquery / autocomplete funktioniert nicht mit Fehlermeldung



## aherzog (26. April 2012)

Hallo miteinander.

Mein 2. Versuch mit jquery zu arbeiten scheitert kläglich.

Ich möchte gerne mit der autocomplete - Funktion arbeiten.
Doch egal was ich mache, welches Tutorial ich durcharbeite, alles scheitert an einer Fehlermeldung des IE8.

Dies ist mein gesamter html-Text in dem die autocomplete - Funktion auf simpelste Weise aufgerufen wird.

```
<script src="jquery.js"></script>
 
<SCRIPT>
$(
	function() 
	{
		var availableTags = [
		"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
		"Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
		"Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
		"PHP", "Python", "Ruby", "Scala", "Scheme"];
		
		$("#tags").autocomplete({source: availableTags});
    }
  );
  </SCRIPT>
 
<DIV class=demo>
<DIV class=ui-widget><LABEL for=tags>Tags: </LABEL><INPUT id=tags> </DIV></DIV>
```
Und das ist der Fehler der vom IE8 ausgegeben wird.

```
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET CLR 1.1.4322)
Timestamp: Thu, 26 Apr 2012 08:30:13 UTC


Message: Object doesn't support this property or method
Line: 12
Char: 3
Code: 0
URI: /ajax_ah/test.html
```

Ich bin jetzt seit 1 1/2 Tage am probieren und suchen.
Und finde einfach nichts was mir hilft die Fehlermeldung wegzubringen.
Hab auch schon hier ein Tutorial gesucht. Scheinbar gibts keines.

Könnt ihr mir helfen was hier falsch ist?

Gruss Andreas


----------



## rd4eva (26. April 2012)

Hast du nur jQery oder auch jQuery UI eingebunden?

autocomplete ist nämlich in jQuery nicht vorhanden sondern in jQuery UI.
http://jqueryui.com/demos/autocomplete/
http://jqueryui.com/download


----------



## aherzog (26. April 2012)

rd4eva 

Hallo rd4eva 

Danke für die Hilfe.

Ich habe nur jquery eingebunden.
Wusste nicht das es noch eine andere jquery-Library gibt.

In den Demo-Scripten sieht man halt nicht was eingebunden ist 

Werde das gleich mal Testen.

Danke.


----------



## jannicars (26. April 2012)

Hier schon:
http://jqueryui.com/demos/autocomplete/default.html
HF.


----------



## aherzog (26. April 2012)

Cool funktioniert "fast" perfekt... 

Eine Frage hätte ich noch.

Ich habe nun das Array umgebaut. Da sind nun viele Produktnummern drin.
z.b 01524, 01234, 34015 usw.

Wenn ich nun im Suchfeld eingebe 015 zeigt er 2 Produktnummern nämlich 01524 und 34015.

Gibt es eine Möglichkeit das er mir von links nch rechts gemäss der Eingabe sucht und nicht dazwischen?

Hab da was im Internet gefunden wo geschrieben steht das es mit 
matchContains:1,   gehe.
Nur ob ich die Zeile drinstehen hab oder nicht, es wird genau gleich wie vorher angezeigt.

Gruss Andreas


----------



## rd4eva (26. April 2012)

Ja gibt es

```
$( "#tags" ).autocomplete({
  source: function( request, response ) {
    var matches = $.map( availableTags, function(tag) {
      if ( tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
        return tag;
      }
    });
    response(matches);
  }
});
```


----------



## aherzog (30. April 2012)

Hi.

Bin nun schon ein ganzes Stück weiter...
Nachdem es mit der Array Abfrage klappte hab ich mit einer 2ten PHP-Seite versucht die Daten dort aus der DB auszulesen und alles in der PHP-Seite per Echo auszugeben.

jQuery hat dann diese PHP-Seite ausgelesen und dememtsprechend die Anzeige generiert.
Auch das hat funktioniert, war aber viel zu langsam für etwa 40'000 Artikel.

Ok. Dann muss woll AJAX her.
Dazu hab ich eine neue Hauptseite erstellt, mit Text aus einem Tutorial.
Dazu  gibt es eine autocomplete.php die die Abfrage in der DB macht und per json die daten wieder zurück an die Hauptseite übergibt.

Nun ist mein problem das in der php-Datei eine json-php-funktion aufgerufen wird.


```
$ziparray = json_encode($ziplist);
```

Und wir haben immer noch PHP 4.xx 
Diese Funktion wird aber erst ab PHP 5 unterstützt.
Ich kann die PHP-Version nicht updaten, das heisst ich muss mit Vers. 4 leben.

Wie kann ich per Ajak eine schnelle Abfrage generieren ohne das ich die json-Befehle aus PHP benutzen muss?

Gruss Andreas


----------



## jannicars (30. April 2012)

Google mal ein bisschen, dann findest du Funktionen, die json_encode unter PHP 4.x erlauben bzw. dir die Funktion geben.


----------



## aherzog (30. April 2012)

SO.. wieder etwas weiter.

Nun habe ich 2 Grundlegende Fragen zu meinem Code.


```
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">

	$("#zipcode").autocomplete({
		source: function( request, response ) {				
			$j.ajax({
				url: "autocomplete.php",
				dataType: "json",
				data: {						
					limit: 12,
					data: request.term
				},
				success: function( data ) {
					response( $j.map( data, function( item ) {
						return {
							label: item.postal_code + ", " + item.place_name,
							value: item.postal_code,					
							myid: item.id_zipcode,							
							bezirk: item.place_name							
						}
					}));
				}
			});
		},
		minLength: 2,
		select: function( event, ui ) {								
			$j('#zipcode_id').val(ui.item.myid);														
			$j('#bezirk').html(ui.item.bezirk);														
 
		},
		open: function() {
			$j( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$j( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			$j( this ).removeClass( "ui-autocomplete-loading" );
 
		}
	});
</script>
</header>
<body>
<input id="zipcode" type="text" name="zipcode" value="" />
<div id="bezirk"></div>
<input id="zipcode_id" type="hidden" name="zipcode_id" value="" />
</body>
</html>
```

Was ich bin jetzt verstanden habe:
data = Mein Eintrag im Textfeld wird zusammen mit limit an autocomplete.php übergeben.
autocomplete.php gibt folgendesn json-Array zurück.

```
[ '00026003 ', '0002600 ', '0002300 ', '0002000 ', '000640 ' ]
```
Wie kann ich im jquery überprüfen ob auch das Array übertragen wurde?
Und wie musss ich den "return" richtig schreiben das die einzelnen Nr. ausgegeben werden.
Ich weiss das der return noch falsch ist. Blicke aber da einfach nicht durch.

```
return {
							label: item.postal_code + ", " + item.place_name,
							value: item.postal_code,					
							myid: item.id_zipcode,							
							bezirk: item.place_name
```
die zuweisung oder ausgabe (select) meinte ich zu verstehen.
Wäre echt froh um Hilfe.

Gruss Andreas


----------



## aherzog (1. Mai 2012)

Sind die beiden jQuerys die eingebunden werden die richtigen?
Funktioniert es mit denen?


```
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.19.custom.min.js"></script>
```


----------



## aherzog (3. Mai 2012)

Hallo.

Entlich funktioniert die Abfrage und Anzeige so wie es soll.

Gibt es eigentlich ein Problem wenn ich nun 3 solcher Textboxen mit Autocomplete versehe?
Jede Textbox gibt andere Daten aus einer anderen Datenbank aus.


Ich habe nämlich 3 solche Texboxen und die 1. (Produktnummer) funktioniert wunderbar.
Die 2te Box (Prozessauftrag) zeigt mir das Widget unterhalb der Textbox an aber ohne das ich den Text sehen kann.
Wenn ich z.b die ersten 2 zahlen eingebe werden mir 20 leere Zeilen angezeigt. Gebe ich weitere Zahlen in das Textfeld ein, so kann ich sehen das das Widget immer kleiner wird und weniger Ergebnise anzeigt. 

Beim 3. Textfeld funktioniert das autocomplete gar nicht, obwoll es genau gleich aufgebaut ist wie die anderen.

Gibt es einen eleganteren Weg als den, den ich gewählt habe?

Auszug aus der index.tpl - Datei (Ist eine Smarty Datei)

```
<form name=search>
			<div id=search_nr><input id='prodnr' class=search_text style='color:Gray;' type=text name=prod_nr value='Produktnr.' maxlen=10 onclick=text_clear();></div>
			<div id=search_text><input id='prodname' class=search_text style='color:Gray;' type=text name=prod_name value='Produktname' onclick=text_clear();></div>
			<div id=search_prozes_nr><input id='aauftrnr' class=search_text style='color:Gray;' type=text name=a_auftr_nr value='Prozessauftragsnr.' onclick=text_clear();></div>
			<div id=submit_search><input type=submit name=search value=Suchen></div>
		</form>
```

index.js

```
// Autocomplete Prozessauftrag
$(function()
{
	$("#aauftrnr").autocomplete(
	{
		source: "autocomplete_a.php",
		minLength: 2,
		select: function(event, ui) 
		{
		
		}
	});
});

// Autocomplete Produktnummer
$(function()
{
	$("#prodnr").autocomplete(
	{
		source: "autocomplete_pnr.php",
		minLength: 2,
		cacheLength:200,
		select: function(event, ui) 
		{
	
		}
	});
}); 

// Autocomplete Produktname
$(function()
{
	$("#prodname").autocomplete(
	{
		source: "autocomplete_pna.php",
		minLength: 2,
		cacheLength:200,
		select: function(event, ui) 
		{
	
		}
	});
}); 

// Im Textfeld Text loeschen beim hineinklicken
function text_clear()
{
	$(document).ready(function() 
	{   
		$('.search_text').click(function() 
		{     
			if (this.value == this.defaultValue) 
			{       
				this.value = '';     
			}
		});   
		$('.search_text').blur(function() 
		{     
			if (this.value == '') 
		{       
			this.value = this.defaultValue;     
		}   
		});
	}); 
}

// Accordeon Ansicht.
$(function() 
{
	$( "#accordion" ).accordion({
		clearStyle: true,
		autoHeight: false
	});
});
```
Es wird für jedes Textfeld eine eigene autocomplete...php aufgerufen.
Diese sind bis auf das DB-Select identisch.

Auf jedes Textfeld wird beim reinklicken ein onclick ausgeführt.

Was mache ich falsch?

Gruss Andreas


----------

