# Verwendung des Autocompleters von Shopware

**URL:** https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190
**Category:** Shopware 3.5
**Tags:** programming
**Created:** [28. Dezember 2010 um 12:06 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190 "2010-12-28T12:06:23Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Sebastian\_K](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@Sebastian\_K](https://forum.shopware.com/u/Sebastian_K)
#### Post date: [28. Dezember 2010 um 12:06 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/1 "2010-12-28T12:06:23Z")

</div>

Wie kann ich den Auto-Completer von Shopware am besten in einem Plugin verwenden?

---

<div class="post-metadata">

### Author: ![Stefan\_Hamann](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@Stefan\_Hamann](https://forum.shopware.com/u/Stefan_Hamann)
#### Post date: [28. Dezember 2010 um 15:37 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/2 "2010-12-28T15:37:22Z")

</div>

Was meinst du denn genau mit AutoCompleter? Bitte mehr Infos…

---

<div class="post-metadata">

### Author: ![Sebastian\_K](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@Sebastian\_K](https://forum.shopware.com/u/Sebastian_K)
#### Post date: [28. Dezember 2010 um 15:49 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/3 "2010-12-28T15:49:59Z")

</div>

Ich meine die Datei: „engine/backend/modules/articles/js/autocompleter.js“ In der Zwischenzeit bin ich auf die Datei: „engine\backend\modules\blog\blogEdit.php“ gestoßen. Den Aufruf habe ich angepasst und es funktioniert. Kann man das Ganze so formatieren, das der Nutzer einen Namen Auswählt (z.B. Artikelname), aber bei der Auswahl die id in das zugeordnete Input-Feld eingetragen wird?

---

<div class="post-metadata">

### Author: ![Sebastian\_K](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@Sebastian\_K](https://forum.shopware.com/u/Sebastian_K)
#### Post date: [29. Dezember 2010 um 08:50 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/4 "2010-12-29T08:50:56Z")

</div>

Kann man statt dem Token (Zeichenkette) auch einen Controller verwenden?

---

<div class="post-metadata">

### Author: ![Stefan\_Hamann](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@Stefan\_Hamann](https://forum.shopware.com/u/Stefan_Hamann)
#### Post date: [29. Dezember 2010 um 08:58 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/5 "2010-12-29T08:58:59Z")

</div>

Für das nachladen der Daten? Ja - [www.shop.de/backend/NAME\_DES\_CONTROLLER … DER\_ACTION](http://www.shop.de/backend/NAME%5C_DES%5C_CONTROLLERS/NAME%5C_DER%5C_ACTION) als Target.

---

<div class="post-metadata">

### Author: ![Sebastian\_K](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@Sebastian\_K](https://forum.shopware.com/u/Sebastian_K)
#### Post date: [29. Dezember 2010 um 11:17 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/6 "2010-12-29T11:17:13Z")

</div>

Wo muss ich das Target angeben?

---

<div class="post-metadata">

### Author: ![Stefan\_Hamann](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@Stefan\_Hamann](https://forum.shopware.com/u/Stefan_Hamann)
#### Post date: [29. Dezember 2010 um 16:08 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/7 "2010-12-29T16:08:37Z")

</div>

Stell doch mal ein Code-Beispiel ein, wie du es aktuell probierst - also so ganz komme ich noch nicht dahinter, was du vor hast…

---

<div class="post-metadata">

### Author: ![Sebastian\_K](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@Sebastian\_K](https://forum.shopware.com/u/Sebastian_K)
#### Post date: [30. Dezember 2010 um 07:55 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/8 "2010-12-30T07:55:38Z")

</div>

Codeausschnitt aus der Detail.tpl (Backend) ` {extends file="backend/index/parent.tpl"} {block name="backend\_index\_css" append}<script type="text/javascript" src="%7Blink%20file='engine/backend/js/mootools.js'%7D"></script><script type="text/javascript" src="%7Blink%20file='engine/backend/modules/articles/js/autocompleter.js'%7D"></script><link href="%7Blink%20file='engine/backend/modules/articles/js/autocompleter.css'%7D" rel="stylesheet" type="text/css"><script type="text/javascript">
	document.addEvent('domready', function()
		{
			var token = ['Test1', 'Test2'];
			new Autocompleter.Local('email', token, {
				'minLength': 1,
				'multiple': false,
				'selectMode': 'pick',
				'overflow': true
				});
		});
</script>{/block} {block name="backend\_index\_body\_inline"} …<input name="textOrdernumber" type="text" id="email" class="w75" value="">… {/block} ` Kann man die Daten für „Token“ direkt über einen Controller laden? Am günstigsten währe mit Übergabe der „eingegebenen“ Zeichenkette, um die Daten gleich zu filtern. Wie ist es am besten möglich, das der Nutzer z.B.: „Test1“ auswählt, aber beim Absenden der Daten statt „Test1“ eine ID (z.B. 1) übergeben wird.

---

<div class="post-metadata">

### Author: ![Stefan\_Hamann](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@Stefan\_Hamann](https://forum.shopware.com/u/Stefan_Hamann)
#### Post date: [30. Dezember 2010 um 08:06 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/9 "2010-12-30T08:06:35Z")

</div>

Hey, die Komponente ist unter [http://digitarald.de/project/autocompleter/](http://digitarald.de/project/autocompleter/) dokumentiert - die kennt auch einen „Remote“-Modus, über die man die Daten lesen kann. Alternativ würde ich empfehlen, das ganze auf Basis von ExtJS aufzubauen - dazu findest du ja ein Tutorial in den Labs - da gibt es ebenfalls eine fertige Remote-Combobox, die man verwenden kann!

---

<div class="post-metadata">

### Author: ![Sebastian\_K](https://avatars.discourse-cdn.com/v4/letter/s/e79b87/32.png) [@Sebastian\_K](https://forum.shopware.com/u/Sebastian_K)
#### Post date: [30. Dezember 2010 um 08:12 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/10 "2010-12-30T08:12:45Z")

</div>

Ich wollte mir nicht extra JS-Dateien herunterladen und die vorhandenen verwenden. Da finde ich nur Autocompleter.Local.

---

<div class="post-metadata">

### Author: ![Stefan\_Hamann](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@Stefan\_Hamann](https://forum.shopware.com/u/Stefan_Hamann)
#### Post date: [30. Dezember 2010 um 08:19 UTC](https://forum.shopware.com/t/verwendung-des-autocompleters-von-shopware/1190/11 "2010-12-30T08:19:59Z")

</div>

Dann verwende Ext.form.ComboBox - das steht auch per Default zur Verfügung und funktioniert komplett Remote. Also ExtJs Sourcen einbinden. Und dann: `<script>
Ext.onReady(function(){
var storeArticles = new Ext.data.Store({
	        url: '{url module=backend controller=CouponsAdmin action=getArticles}'
	        ,{literal}
	        reader: new Ext.data.JsonReader({
	            root: 'items',
	            totalProperty: 'total',
	            id: 'id'
	        }, [
	            {name: 'name'},
	            {name: 'ordernumber'},
	            {name: 'supplier'},
	            {name: 'id'}
	        ]){/literal}
	    });
new Ext.form.ComboBox({
			        store: storeArticles,
			        displayField:'name',
			        lazyRender: false,
		            mode: 'remote',
		            triggerAction: 'all',
			        fieldLabel: 'Artikel',
			       	forceSelection: true,
			       	itemId: 'articleCombo',
			        valueField: 'id',
			        hiddenName: 'articleID',
			        typeAhead: false,
			        loadingText: 'Searching...',
			        width: 570,
applyTo: 'myTest',
			        pageSize:10,
			        hideTrigger:false,
	                allowBlank:false,
		            listeners: {
		            	'expand': { fn:function(combobox){
		            	},scope:this}
	                }
			    })
});
</script>` Und dann im HTML-Code: `<input type="text" id="myTest" size="20">` Muss ggf. noch etwas modifiziert werden, aber vom Prinzip her funktioniert das so. Samples: [http://dev.sencha.com/deploy/dev/exampl … ombos.html](http://dev.sencha.com/deploy/dev/examples/form/combos.html) Doku: [http://www.sencha.com/deploy/dev/docs/](http://www.sencha.com/deploy/dev/docs/)