What I want to do is this:
1. You type in a text input, and an autocompleter appears
2. If you hit enter without selecting an element in the autocompleter,
the text you typed should stay in the input box (not replaced with the
first autocomplete item) and the autocompleter should hide.
3. If you click or hit enter on an autocompleter item, it should
replace whatever you have typed in the text box.
The problem I keep running into is that with the autocompleter, the
first item is always selected, so if you type and hit enter, the first
match will replace your the text you entered; this is no good if you
want to be able to enter new values in the text box.
Here's how I'm trying to solve it:
1. Create a blank <li> element at the top of the list, and set it to
display:none; so that the first "selected" item is hidden, and the
user must use an arrow key or click to select a non-blank item
2. If the user hits the enter key after typing a value, technically,
the blank <li> item has been selected, so I need to use some kind of
callbacks to test whether the <li> value returned from the
autocompleter is blank. If blank, I leave the input alone. If non-
blank, I replace the input text with the text in the <li> returned by
the autocompleter.
The problem I have is that after hours of internet/api/bakery/
scriptaculous/source code reading, it looks like the only autoComplete
options I can use are updateElement and afterUpdateElement.
>From what I can tell, updateElement receives the selected <li> element
as a parameter, and afterUpdateElement receives the <li> element and
the <input> element as parameters. I thought I could get the
updateElement to do nothing, and the have the afterUpdateElement
compare the value of the <input> to the <li>, and update when
necessary. Problem is, when I attach a function to the updateElement
event, the afterUpdateElement event will not fire.
Here is my PHP code to create the autocompleter:
echo $ajax->autoComplete(
'CategoriesItemsShopper.item_name',
'/categories_items_shoppers/auto_complete_item',
array(
'updateElement' => 'function() { return true;
}',
'afterUpdateElement' => 'updateData'
)
);
and here is the javascript to process the events:
function updateData(a, b)
{
alert(a);
alert(b);
if ($(b).innerHTML) {
$F(a).value = $(b).innerHTML;
}
}
The alerts are there just to see if the function is ever called-- it
isn't. I've also tried using a separate function for the updateElement
event instead of an anonymous function, but no joy.
I can't believe this is that uncommon a thing to want to do; I just
can't find any info on how to get it done with CakePHP.
Thanks in advance for your suggestions,
-Josh
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"CakePHP" group.
To post to this group, send email to cake-php@googlegroups.com
To unsubscribe from this group, send email to
cake-php+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---
