[Proto-Scripty] autosuggest feature enter button hack in new Ajax.Autocompleter
Hello All, I have just joined this group and it's my first post. I will like to thank the community for coming up with such a powerful library. I am using new Ajax.Autocompleter in one of script and it works fine. I am using it in a input text box, in which, user types in the search term and back end script queries the database to get a result set and suggested items get shown as a list in input text box. When the suggested items show up as list in my input text box, when I press enter/tab key, a single list item gets selected. However, to submit this item, I have to press enter key again. In short, I need to hit enter twice in order to submit the list item. I will like if this action is done in a single hit of enter key. I tried using some JavaScript hacks to submit the form on enter key but I think scriptaculus is over riding it. Is this the case? Is there any way to make this work with just single enter key? Thanks. Regards, Yogesh --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: autosuggest feature enter button hack in new Ajax.Autocompleter
Hi Matt, I tried it and it works. Thank you so much for the quick reply. Thanks again. Regards, Yogesh On Aug 7, 11:48 am, Matt Foster mattfoste...@gmail.com wrote: I've never actually used this component but in researching the docs, could you use the callback for afterUpdateElement and then programatically execute the form's submit method? http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter -- http://positionabsolute.net On Aug 7, 10:11 am, Yogesh yogesh.aga...@gmail.com wrote: Hello All, I have just joined this group and it's my first post. I will like to thank the community for coming up with such a powerful library. I am using new Ajax.Autocompleter in one of script and it works fine. I am using it in a input text box, in which, user types in the search term and back end script queries the database to get a result set and suggested items get shown as a list in input text box. When the suggested items show up as list in my input text box, when I press enter/tab key, a single list item gets selected. However, to submit this item, I have to press enter key again. In short, I need to hit enter twice in order to submit the list item. I will like if this action is done in a single hit of enter key. I tried using some JavaScript hacks to submit the form on enter key but I think scriptaculus is over riding it. Is this the case? Is there any way to make this work with just single enter key? Thanks. Regards, Yogesh --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Submit form on select for autosuggest
Hello,
I am using Ajax.autocompleter in one of my forms. I am calling a
custom function getSelectedId after update element to get an ID of the
selected list item.
I need a functionality such that form should get submitted whenever :
1) a user clicks a item using mouse from the autosuggest list.
2) Whenever user presses enter key while a list item is selected.
(This I have achieved through a hack as shown in code below. I
call .submit() after getSelectedId function)
I don't know how to submit the form on mouse click. Any help on this
issue will be really helpful to me.
script type=text/javascript
new Ajax.Autocompleter(search,hint,server_class.php,
{afterUpdateElement : getSelectedId, minChars:1});
function getSelectedId(text, li) {
$('class_id').value=li.id;
document.forms['searchcustomerform'].submit();
}
/script
Thank you.
Sincerely,
Yogesh
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Autocompleter requst on hitting space character
Hello,
I am using Ajax.autocompleter on a text input search field. What I
want to have it after a user hits a space character, my php script
should return 30 most recent results. I have written the query on php
side for this. I have set minchars=0 in autocompleter options.
I checked from firebug's responses that when I hit the space key, my
page is not making the request to my server side page.
My question is how do I trigger a request on space key?
Following is my code:
script type=text/javascript
new Ajax.Autocompleter(search,hint,server_class_nonew.php,
{
afterUpdateElement :
getSelectedId,
minChars:0 ,
frequency:0.4,
paramName: value
}
);
function getSelectedId(text, li) {
$('class_id').value=li.id;
document.forms['searchcustomerform'].submit();
}
/script
Thanks you.
Sincerely,
Yogesh
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Submit form on select for autosuggest
Hello,
Thanks for the reply. I tried doing that but it didn't work for me.If
you point out the mistake in following code, it will be great.Thanks
again.
script type="text/_javascript_"
new Ajax.Autocompleter("search","hint","server_class.php",
{afterUpdateElement : getSelectedId, minChars:1});
function getSelectedId(text, li) {
$('class_id').value=li.id;
document.forms['searchcustomerform'].submit();
}
/script
Thanks,
Yogesh
Matt Foster wrote:
http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter
afterUpdateElement function...
you receive an input object and some element that was representing the
field. At this point you could execute form.submit..
--
http://positionabsolute.net
On Oct 7, 11:19am, Yogesh yogesh.aga...@gmail.com wrote:
Hello,
I am using Ajax.autocompleter in one of my forms. I am calling a
custom function getSelectedId after update element to get an ID of the
selected list item.
I need a functionality such that form should get submitted whenever :
1) a user clicks a item using mouse from the autosuggest list.
2) Whenever user presses enter key while a list item is selected.
(This I have achieved through a hack as shown in code below. I
call .submit() after getSelectedId function)
I don't know how to submit the form on mouse click. Any help on this
issue will be really helpful to me.
script type="text/_javascript_"
new Ajax.Autocompleter("search","hint","server_class.php",
{afterUpdateElement : getSelectedId, minChars:1});
function getSelectedId(text, li) {
$('class_id').value=li.id;
document.forms['searchcustomerform'].submit();
}
/script
Thank you.
Sincerely,
Yogesh
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Submit form on select for autosuggest
Thanks for pointing out this error Matt. I should have noticed this.
But even after defining the function earlier, form submit doesn't work
:(
Sorry.
Sincerely,
Yogesh
Matt Foster wrote:
You've defined your function after you reference it...
It needs to be created first then it can be referenced.
function getSelectedId(text, li) {
$('class_id').value=li.id;
document.forms['searchcustomerform'].submit();
}
new Ajax.Autocompleter("search","hint","server_class.php",
{afterUpdateElement : getSelectedId, minChars:1});
--
http://positionabsolute.net
On Oct 8, 10:45pm, Yogesh Agashe yogesh.aga...@gmail.com wrote:
Hello,
Thanks for the reply. I tried doing that but it didn't work for me.If you point out the mistake in following code, it will be great.Thanks again.script type="text/_javascript_" new Ajax.Autocompleter("search","hint","server_class.php", {afterUpdateElement : getSelectedId, minChars:1}); function getSelectedId(text, li) { $('class_id').value=li.id; document.forms['searchcustomerform'].submit(); } /scriptThanks,
Yogesh
Matt Foster wrote:http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleterafterUpdateElement function... you receive an input object and some element that was representing the field. At this point you could execute form.submit.. --http://positionabsolute.netOn Oct 7, 11:19am, Yogeshyogesh.aga...@gmail.comwrote:Hello, I am using Ajax.autocompleter in one of my forms. I am calling a custom function getSelectedId after update element to get an ID of the selected list item. I need a functionality such that form should get submitted whenever : 1) a user clicks a item using mouse from the autosuggest list. 2) Whenever user presses enter key while a list item is selected. (This I have achieved through a hack as shown in code below. I call .submit() after getSele
ctedId function) I don't know how to submit the form on mouse click. Any help on this issue will be really helpful to me. script type="text/_javascript_" new Ajax.Autocompleter("search","hint","server_class.php", {afterUpdateElement : getSelectedId, minChars:1}); function getSelectedId(text, li) { $('class_id').value=li.id; document.forms['searchcustomerform'].submit(); } /script Thank you. Sincerely, Yogesh
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Submit form on select for autosuggest
Hello,
I am glad to say that I found the root of the problem. I had a button
named submit and this was causing the problem.
Thanks so much Matt for pointing out the function definition error.
As Christo notes here: (http://www.spiration.co.uk/post/1232/Submit%20is%20not%20a%20function)
This means you have a function trying to call the form's submit()
method, but you also have a button which is called submit(). This
causes a conflict in _javascript_, because the submit method is already
bound to that button.
To solve the problem, simply change the name of the button so that
name="moo" (or something). Your submit() call in your _javascript_
function/method will now work.
Sincerely,
Yogesh
Yogesh Agashe wrote:
Thanks for pointing out this error Matt. I should have noticed this.
But even after defining the function earlier, form submit doesn't work
:(
Sorry.
Sincerely,
Yogesh
Matt Foster wrote:
You've defined your function after you reference it...
It needs to be created first then it can be referenced.
function getSelectedId(text, li) {
$('class_id').value=li.id;
document.forms['searchcustomerform'].submit();
}
new Ajax.Autocompleter("search","hint","server_class.php",
{afterUpdateElement : getSelectedId, minChars:1});
--
http://positionabsolute.net
On Oct 8, 10:45pm, Yogesh Agashe yogesh.aga...@gmail.com wrote:
Hello,
Thanks for the reply. I tried doing that but it didn't work for me.If you point out the mistake in following code, it will be great.Thanks again.script type="text/_javascript_" new Ajax.Autocompleter("search","hint","server_class.php", {afterUpdateElement : getSelectedId, minChars:1}); function getSelectedId(text, li) { $('class_id').value=li.id; document.forms['searchcustomerform'].submit(); } /scriptThanks,
Yogesh
Matt Foster wrote:http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleterafterUpdateElement function... you receive an input object and some element that was representing the field. At this point you could execute form.submit.. --http://positionabsolute.netOn Oct 7, 11:19am, Yogeshyogesh.aga...@gmail.comwrote:Hello, I am using Ajax.autocompleter in one of my forms. I am calling a custom function getSelectedId after update element to get an ID of the selected list item. I need a functionality such that form should get submitted whenever : 1) a user clicks a item using mouse from the autosuggest list. 2) Whenever user presses enter key while a list item is selected. (This I have achieved through a hack as shown in code below. I call .submit() after getSele
ctedId function) I don't know how to submit the form on mouse click. Any help on this issue will be really helpful to me. script type="text/_javascript_" new Ajax.Autocompleter("search","hint","server_class.php", {afterUpdateElement : getSelectedId, minChars:1}); function getSelectedId(text, li) { $('class_id').value=li.id; document.forms['searchcustomerform'].submit(); } /script Thank you. Sincerely, Yogesh
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
Hi Ashwin, How about floating the span elements? I have similar list and I use float. Add a class to your span elements. In CSS, assign a width and float them left or right as per your requirement. HTH. Yogesh Ashwin wrote: One of the reasons I like the Google Suggest powered autocomplete function at Google Finance (http://finance.google.com) is because the drop choice choices appear in a tabular format with 2 columns. The left column contains the ticker symbol and the right column contains the company name. I am trying to emulate a similar effect but with 4 columns. Without thinking about customization, my first attempt involves trying to return data that looks like this from the server side ul lispan style=width:50px;1/spanspan style=width: 150px;Jane/spanspan style=width:150px;Doe/spanspan style=width:250px;Director/span/li lispan style=width:50px;2/spanspan style=width: 150px;John/spanspan style=width:150px;Doe/spanspan style=width:250px;Manager/span/li lispan style=width:50px;3/spanspan style=width: 150px;Peter/spanspan style=width:150px;Trent/spanspan style=width:250px;Developer/span/li /ul In a regular HTML page, this has a tabular look to it. But when this content gets loaded in the autocompleter's DIV element, it gets treated just like HTML whitespace. Am I missing something here, or are there better ways of doing this? Thanks! Ashwin --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
I have a list with 3 columns. This is the code. You just modify it a
little bit for your page.
li
Name
span class='citystateinlist'City,State/span
span class='dateinlist'Date/span
/li
.dateinlist{
float: right;
width: 80px;
}
.citystateinlist{
float: right;
width: 150px;
}
Ashwin wrote:
Hi Yogesh,
You gave me some food for thought! I added float:left; and width:
300px; attributes to all the span tags just to see how that turns
out. When I do that, the span elements are outside the enclosing
li elements, one below the other. I am no CSS expert, so I could be
messing up somehow in that area. Can you send me a relevant snippet of
the CSS that you employ for this effect?
Thanks,
Ashwin
On Nov 11, 12:59pm, Yogesh Agashe yogesh.aga...@gmail.com wrote:
Hi Ashwin,
How about floating the span elements? I have similar list and I use
float. Add a class to your span elements. In CSS, assign a width and
float them left or right as per your requirement.
HTH.
Yogesh
Ashwin wrote:
One of the reasons I like the Google Suggest powered autocomplete
function at Google Finance (http://finance.google.com) is because the
drop choice choices appear in a tabular format with 2 columns. The
left column contains the ticker symbol and the right column contains
the company name. I am trying to emulate a similar effect but with 4
columns. Without thinking about customization, my first attempt
involves trying to return data that looks like this from the server
side
ul
lispan style="width:50px;"1/spanspan style="width:
150px;"Jane/spanspan style="width:150px;"Doe/spanspan
style="width:250px;"Director/span/li
lispan style="width:50px;"2/spanspan style="width:
150px;"John/spanspan style="width:150px;"Doe/spanspan
style="width:250px;"Manager/span/li
lispan style="width:50px;"3/spanspan style="width:
150px;"Peter/spanspan style="width:150px;"Trent/spanspan
style="width:250px;"Developer/span/li
/ul
In a regular HTML page, this has a tabular look to it. But when this
content gets loaded in the autocompleter's DIV element, it gets
treated just like HTML whitespace.
Am I missing something here, or are there better ways of doing this?
Thanks!
Ashwin- Hide quoted text -
- Show quoted text -
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: formatting list item content in Ajax.Autocompleter
Sure, glad that I was able to help you !
Yogesh
Ashwin wrote:
In addition to your snippet, I had to add the following CSS attributes
to the LI element:
position: relative;
overflow: auto;
and slightly increased the width of the container UL element. It is
now showing up as expected.
Thanks for your help!
Ashwin
On Nov 11, 2:15pm, Yogesh Agashe yogesh.aga...@gmail.com wrote:
I have a list with 3 columns. This is the code. You just modify it a little bit for your page.
li
Name
span class='citystateinlist'City,State/span
span class='dateinlist'Date/span
/li
.dateinlist{
float: right;
width: 80px;
}
.citystateinlist{
float: right;
width: 150px;
}
Ashwin wrote:Hi Yogesh, You gave me some food for thought! I added float:left; and width: 300px; attributes to all the span tags just to see how that turns out. When I do that, the span elements are outside the enclosing li elements, one below the other. I am no CSS expert, so I could be messing up somehow in that area. Can you send me a relevant snippet of the CSS that you employ for this effect? Thanks, Ashwin On Nov 11, 12:59pm, Yogesh Agasheyogesh.aga...@gmail.comwrote:Hi Ashwin, How about floating the span elements? I have similar list and I use float. Add a class to your span elements. In CSS, assign a width and float them left or right as per your requirement. HTH. Yogesh Ashwin wrote:One of the reasons I like the Google Suggest powered autocomplete function at Google Finance (http://finance.
google.com) is because the drop choice choices appear in a tabular format with 2 columns. The left column contains the ticker symbol and the right column contains the company name. I am trying to emulate a similar effect but with 4 columns. Without thinking about customization, my first attempt involves trying to return data that looks like this from the server sideul lispan style="width:50px;"1/spanspan style="width: 150px;"Jane/spanspan style="width:150px;"Doe/spanspan style="width:250px;"Director/span/li lispan style="width:50px;"2/spanspan style="width: 150px;"John/spanspan style="width:150px;"Doe/spanspan style="width:250px;"Manager/span/li lispan style="width:50px;"3/spanspan style="width: 150px;"Peter/spanspan style="width:150px;"Tr
ent/spanspan style="width:250px;"Developer/span/li /ulIn a regular HTML page, this has a tabular look to it. But when this content gets loaded in the autocompleter's DIV element, it gets treated just like HTML whitespace.Am I missing something here, or are there better ways of doing this?Thanks!Ashwin- Hide quoted text -- Show quoted text -
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
