Problem mit Ajax.Autocompleter

**zerni** · 19.06.2008, 13:27

Ganz einfach: du musst nach jedem Zeichen ein counter runterlaufen lassen von 500ms. Erst wenn dieser runtergelaufen ist und kein Zeichen währenddessen kommt wird der request gesendet. Wenn doch ein Zeichen kommt wird der counter zurück gesetzt und das Spiel beginnt von Vorne.

Ich mache es immer in Prototype, deshalb kann ich dir gerade nicht den direkten Code in JS geben

PHP-Code:


<input type="text" onClick="startObserver(this)">



var obs;

    function startObserver(element){

     if(!obs){

          obs = new Form.Element.Observer(

          input,

          0.5,

          function(el, value){

            if(input.value.length > 2)  new Ajax.Updater(element, search.php,

                     { method: 'post', parameters: "string"+searchstring});

          }

        )

      }

    }

info bei prototype:http://www.prototypejs.org/api/timedObserver

**martin2** · 19.06.2008, 13:50

mit einer zeitverzögerung habe ich es auchon versucht, das grundproblem beliebt aber er setzt bei 4 Buchstaben 3 identische Request ab....völlig identische Requests.....

(benutze übrigends scriptaculous, den großen Bruder von prototype)

**E.T.** · 19.06.2008, 14:54

Habe dies durchgetestet mit Prototype 1.6.0, script.aculo.us 1.8.0 und kann den beschriebenen Effekt nicht feststellen.

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="src/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>

<style type="text/css" media="screen">
    .selected { background-color: #888; }
</style>

<script type="text/javascript" language="javascript">

window.onload = function() {
	new Ajax.Autocompleter('inputfeld','autocompleterfeld','autocomplete_result.html', {afterUpdateElement: macheEtwas});
}

function macheEtwas(){
	alert('Du hast '+$('inputfeld').value+' ausgesucht.');
	return false;
}

</script>

</head>
<body>

<form>
<input id="inputfeld" type="text" style="width:220px;"/>
<div id="autocompleterfeld" style="display:none;border:1px solid black;background-color:#ffffee;"></div>
</form>

</body>
</html>

**tontechniker** · 19.06.2008, 23:20

mit einer zeitverzögerung habe ich es auchon versucht, das grundproblem beliebt aber er setzt bei 4 Buchstaben 3 identische Request ab....völlig identische Requests.....

Ist doch ganz einfach: Du erzeugst jedes mal einen neuen Autocompleter - das ist doch Unsinn:

Code:

         this.field.onkeyup = ... getFebiNum:function(evt) {
...
         new Ajax.Updater('result_table','/ajax/ArtikelByNum/', {methode:'post',parameters:'text='+value});
... / ...
         new Ajax.Autocompleter('hersteller','box_febi','/ajax/SuggestNumbers/', {paramName: 'text'});
  }

**pekka** · 20.06.2008, 00:48

Original geschrieben von martin2
(benutze übrigends scriptaculous, den großen Bruder von prototype)

Scriptaculous ist nicht der große Bruder, sondern der sehr feminin angehauchte Cousin von Protoype, der in der Großstadt Kunst macht, ein paar Musiker managt und bei jeder Party im Glitterkostüm anzutreffen ist. Da er sehr großzügig ist und viele an seinem Erfolg teilhaben läßt, ist er aber allenthalben sehr beliebt.

**martin2** · 20.06.2008, 17:28

PHP-Code:


var InputWatcher=Class.create();

InputWatcher.prototype = {

   initialize: function(field)

   {

     this.field=$(field);

     this.field.onkeyup=this.getNum.bindAsEventListener(this); 

          

   },

   getNum:function(evt)

   {

      var taste=evt.keyCode;

      if(taste!=13 && (taste<38 || taste>40))

      {

         new Ajax.Autocompleter(

                  'hersteller',

                  'box_febi',

                  '/ajax/autocompleter/', 

                  {

                     paramName: 'text',

                     afterUpdateElement:getArtDetails

                  }

        );

      }

   }

   

}



function getFebiArtDetails(wert)

{

   new Ajax.Updater('result_table','/ajax/getData/',{parameters: {text:wert.value}});

}

var watcher =  new InputWatcher('hersteller');

so sieht das jetzt aus!, trotzdem hab ich immer noch das Problen mit den Requestes...an welchen handler solltze man das ganze den binden?

nochmal alles durch gelesen, ich mache also beijedem keyup einen neuen Ajax.Autocomleter auf das sehe ich doch richtig oder?

Wie kann ich das verhindern? also praktisch eine Singelton implementieren?

Erledig... das bindAsEventListener(this); ist natürlich doppel gemoppelt bei autocompleter ;-)

PHP-Code:


window.onload=function(){   



         new Ajax.Autocompleter(

                  'hersteller',

                  'box',

                  '/ajax/autocompleterfebi/', 

                  {

                     paramName: 'text',

                     afterUpdateElement:getArtDetails,

                     frequency:1.0                  }

        );

      }

     

function getArtDetails(wert)

{

   new Ajax.Updater('result_table','/ajax/getData/',{parameters:{text:wert.value}});

}

llöst das Problem welches bei richtigem lesen der doku garnicht aufgetreten wäre....

**martin2** · 20.06.2008, 17:37

Original geschrieben von pekka
Scriptaculous ist nicht der große Bruder, sondern der sehr feminin angehauchte Cousin von Protoype, der in der Großstadt Kunst macht, ein paar Musiker managt und bei jeder Party im Glitterkostüm anzutreffen ist. Da er sehr großzügig ist und viele an seinem Erfolg teilhaben läßt, ist er aber allenthalben sehr beliebt.

oder so :-) gute charakterisierung

Problem mit Ajax.Autocompleter