Re: Witango-Talk: AJAX Pop-up list

[Brian Humes]

Hi Stefan,

I just finished with a project doing exactly what you describe. I  
used the scriptaculous framework with a Witango app to pull the data.


Here's a link to the demo and scripts:

http://demo.script.aculo.us/ajax/autocompleter

Let me know if I can be of further assistance.


Brian Humes
Director, Interactive
JohnsonRauhoff Communications Group
269.428.9257 (Direct)
269.428.3377 (Main)
269.428.3312 (Fax)
www.johnson-rauhoff.com
[EMAIL PROTECTED]

_


On Apr 11, 2007, at 2:15 PM, Stefan Gonick wrote:


Hi Everyone,

I want to do the simplest possible AJAX function for one of my  
clients.

I have never done any AJAX before, so I don't even know where to start
and am hesitant to plunge into the whole topic for this simple  
application.


What I am trying to do is as follows:

I have a table with 2500 entries that I would like to put in a pop- 
up list,
but it's too many items to be practical. Instead, I would like to  
use a small

text field where I would start typing in a few characters, which would
dynamically (AJAX-style) update a separate pop-up list (select field).
I probably wouldn't start populating the list until at least 2  
characters

had been typed to keep the list size reasonable.

Has anyone created any simple AJAX already that could give me some
pointers for my application?

Thanks in advance,
Stefan
=
Database WebWorks: Dynamic web sites through database integration
http://www.DatabaseWebWorks.com

CoachVille: For coaches and people taking teleclasses
http :// www.cvcommunity.com?af=69474

__ 
__

TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf




TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf

Re: Witango-Talk: AJAX Pop-up list [longish details]

[Dale Graham]

We use an autocompleter.js library downloaded off the net and have a taf action that provides the search.Here's the library:


TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf
//
// This is a port of the sciptaculous autocomplete which is distributed under the MIT license.
//
// Autocompleter.Base handles all the autocompletion functionality 
// Autocompleter.Base handles all the autocompletion functionality
// that's independent of the data source for autocompletion. This
// includes drawing the autocompletion menu, observing keyboard
// and mouse events, and similar.
//
// Specific autocompleters need to provide, at the very least, 
// a getUpdatedChoices function that will be invoked every time
// the text inside the monitored textbox changes. This method 
// should get the text for which to provide autocompletion by
// invoking this.getToken(), NOT by directly accessing
// this.element.value. This is to allow incremental tokenized
// autocompletion. Specific auto-completion logic (AJAX, etc)
// belongs in getUpdatedChoices.
//
// Tokenized incremental autocompletion is enabled automatically
// when an autocompleter is instantiated with the 'tokens' option
// in the options parameter, e.g.:
// new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
// will incrementally autocomplete with a comma as the token.
// Additionally, ',' in the above example can be replaced with
// a token array, e.g. { tokens: [',', '\n'] } which
// enables autocompletion on multiple tokens. This is most 
// useful when one of the tokens is \n (a newline), as it 
// allows smart autocompletion after linebreaks.

var KEY_BACKSPACE = 8
var KEY_TAB =   9
var KEY_RETURN =   13
var KEY_ESC =  27
var KEY_LEFT = 37
var KEY_UP =   38
var KEY_RIGHT =39
var KEY_DOWN = 40
var KEY_DELETE =   46

Autocompleter = function() {

}

Autocompleter.Base = function() {

}

update(Autocompleter.Base.prototype, {

  baseInitialize: function(element, update, options) {
this.element = $(element);
this.update  = $(update);
this.hasFocus= false; 
this.changed = false; 
this.active  = false; 
this.index   = 0; 
this.entryCount  = 0;

if (this.setOptions)
  this.setOptions(options);
else
  this.options = options || {};

this.options.paramName= this.options.paramName || this.element.name;
this.options.tokens   = this.options.tokens || [];
this.options.frequency= this.options.frequency || 0.4;
this.options.minChars = this.options.minChars || 1;
this.options.onShow   = this.options.onShow || 
bind(function(element, update){
  if(!update.style.position || update.style.position=='absolute') {
update.style.position = 'absolute';
this.clonePosition(element, update);
//Position.clone(element, update, {setHeight: false, offsetTop: element.offsetHeight});
  }
  // Todo: make it fade in ?
  showElement(update);
  //Effect.Appear(update,{duration:0.15});
}, this);
this.options.onHide = this.options.onHide || 
function(element, update){
// Todo: make if fade out like in the scriptaculous version?
//new Effect.Fade(update,{duration:0.15})
hideElement(update);
};

if (typeof(this.options.tokens) == 'string') 
  this.options.tokens = new Array(this.options.tokens);

this.observer = null;

this.element.setAttribute('autocomplete','off');

hideElement(this.update);

addToCallStack(this.element, "onblur", bind(this.onBlur, this));
addToCallStack(this.element, "onkeypress", bind(this.onKeyPress, this));



//Event.observe(this.element, "blur", this.onBlur.bindAsEventListener(this));
//Event.observe(this.element, "keypress", this.onKeyPress.bindAsEventListener(this));
  },

  /**
   * Copied from prototype.js version 1.4.0_rc3
   */
  cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
  valueT += element.offsetTop  || 0;
  valueL += element.offsetLeft || 0;
  element = element.offsetParent;
} while (element);
return [valueL, valueT];
  },

  /**
   * Copied from prototype.js version 1.4.0_rc3
   */
  clonePosition: function(source, target) {
source = $(source);
target = $(target);
//target.style.position = 'absolute';
var offsets = this.cumulativeOffset(source);
//target.style.top= offsets[1] + 'px';
target.style.left   = offsets[0] + 'px';
target.style.width  = source.offsetWidth + 'px';
//target.style.height = source.offsetHeight + 'px';
  },


  show: function() {
if(this.update.style.display == 'none') this.options.onShow(this.element, this.update);

/*
if(!this.iefix && 
  (navigator.appVersion.indexOf('MSIE')>0) &&
  (navigator.userAgent.indexOf('Opera')

Re: Witango-Talk: AJAX Pop-up list

[Alan Wolfe]

I've done quite a bit of ajax and this book by far is the most
comprehensive, most useful and easiest to understand that I've seen

http://www.amazon.com/Ajax-Patterns-Practices-Experts-Voice/dp/1590596161/ref=pd_bbs_sr_1/002-3103529-0108038?ie=UTF8&s=books&qid=1176333998&sr=8-1

really awesome book (:

On 4/11/07, Ted Wolfley <[EMAIL PROTECTED]> wrote:




Hi,



We just started using AJAX this year and I did a google search on AJAX
autocomplete.  The code to interact with the database was in php but I just
created a taf to handle the requests.  It is easier than you think to set
up.



Ted





From: Stefan Gonick [mailto:[EMAIL PROTECTED]
Sent: Wednesday, April 11, 2007 2:15 PM
To: witango-talk@witango.com
Subject: Witango-Talk: AJAX Pop-up list




Hi Everyone,

I want to do the simplest possible AJAX function for one of my clients.
I have never done any AJAX before, so I don't even know where to start
and am hesitant to plunge into the whole topic for this simple application.

What I am trying to do is as follows:

I have a table with 2500 entries that I would like to put in a pop-up list,
but it's too many items to be practical. Instead, I would like to use a
small
text field where I would start typing in a few characters, which would
dynamically (AJAX-style) update a separate pop-up list (select field).
I probably wouldn't start populating the list until at least 2 characters
had been typed to keep the list size reasonable.

Has anyone created any simple AJAX already that could give me some
pointers for my application?

Thanks in advance,
Stefan



=
Database WebWorks: Dynamic web sites through database integration
http://www.DatabaseWebWorks.com

CoachVille: For coaches and people taking teleclasses
http :// www.cvcommunity.com?af=69474


TO

UNSUBSCRIBE: Go to
http://www.witango.com/developer/maillist.taf


TO

UNSUBSCRIBE: Go to
http://www.witango.com/developer/maillist.taf



TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf

RE: Witango-Talk: AJAX Pop-up list

[Ted Wolfley]

Hi,

 

We just started using AJAX this year and I did a google search on AJAX
autocomplete.  The code to interact with the database was in php but I
just created a taf to handle the requests.  It is easier than you think
to set up.

 

Ted

 



From: Stefan Gonick [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, April 11, 2007 2:15 PM
To: witango-talk@witango.com
Subject: Witango-Talk: AJAX Pop-up list

 

Hi Everyone,

I want to do the simplest possible AJAX function for one of my clients.
I have never done any AJAX before, so I don't even know where to start
and am hesitant to plunge into the whole topic for this simple
application.

What I am trying to do is as follows:

I have a table with 2500 entries that I would like to put in a pop-up
list,
but it's too many items to be practical. Instead, I would like to use a
small
text field where I would start typing in a few characters, which would
dynamically (AJAX-style) update a separate pop-up list (select field). 
I probably wouldn't start populating the list until at least 2
characters
had been typed to keep the list size reasonable.

Has anyone created any simple AJAX already that could give me some
pointers for my application?

Thanks in advance,
Stefan



=
Database WebWorks: Dynamic web sites through database integration
http://www.DatabaseWebWorks.com

 CoachVille: For coaches and people
taking teleclasses
http   ://
www.cvcommunity.com?af=69474   



TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf


TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf