Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Need help with Auto Complete Script

 
Sandy Joshi
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, recently my clients have asked me to change all the text input types to the auto complete suggestion boxes(Thanks to google's Auto Complete...)
I am good at server side programming but dont know how to make this work. If any one can suggest me some good script or tutorial , it will be really helpful.

Thanks in advance.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65218
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please take the time to choose the correct forum for your posts. This forum is for questions on JSP. For more information, please read this.

This post has been moved to a more appropriate forum.
 
Justin Fox
Ranch Hand
Posts: 802
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
auto complete is pretty easy actually, I believe <input type="text"/> has an event called onKeyUp, so you can get the text in the textbox every time they type...

so if they were typing 'Nike'

when they type the 'N' query your shoes table for 'Like "N%" '.

results for example:

New Balance
Nike

and then when they type 'Ni' query your shoes table for ' Like "Ni%" '.

results:

Nike

To do this you'll probably need to use ajax, because refreshing the page would look silly.

Justin
 
Sandy Joshi
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
HI,
Thanks for the response. Can you give me any Hint how can i handle that in Ajax. I mean how can i send the string which i capture on keyup and prepare an Ajax request for the same.

Thanks
 
Justin Fox
Ranch Hand
Posts: 802
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


the code above, just put into a file and save as AJAXLib.js

In the <head></head> of your html file just put:

<script type = "text/javascript" src = "directory/AJAXLib.js"></script>

now in a function that you call on onKeyUp, we'll call it autoComplete(this.value).
So the tag would look like <input type="Text" onclick="autoComplete(this.value)" />

and...


The reason you have to make a callBackFunction is because when you make an ajax request, the response doesn't happen right away so you have to make a callbackfunction to handle the event when the response is ready to be dealt with.

Justin
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic