Ajax AutoComplete Help ...

Okay! So now you have a working database, and you want some way to have an autocomplete complete search bar for those database objects. How are we ever going to get this to work? Luckily for us both, there is the INTERNET! My blog will closely follow the code of another post, because it is the code that I used as well. My job will be to clarify how it is used and some errors and troubles I ran into during my testing period of it.
First, you will want to use the code from this website. AJAX Auto Complete

This example works for facebook and can similarly be used for any other application or production. Firstly, the key to this is that the Options code AND the JavaScript code MUST be placed in SCRIPT braces inside the .html or .fbml file you want to have the search bar in. If you want it on every page you will want this code inside of your LAYOUT page, wherever you want it. I have my code in layout/_header.fbml.erb file, since I have mine at the top of the page in the header. ex:
layout/_header.fbml.erb


options = {
preMsgTxt: “search for topic…”, // text to display when nothing has been typed
menuOpacity: 94, // opacity of the menu
ajaxUrl: _hostname+”/topics/auto_complete_for_table_thing”, // url to your data source
focus: false, // whether or not to auto-focus the textbox upon creation
onEnter: function(value) { // handler for hitting the ‘enter’ key
console.log(value);
document.setLocation(”http://apps.facebook.com/researchr/topics/search?topic_search=”+value);
},
delayTime: 100, // amount of idle time after a keypress before making the ajax call
clearOnEnter: false // whether or not to clear the text after they hit enter
};

function ajaxSuggestFbml(obj, options) {
this.obj = obj; // Setup the events we’re listening to
this.obj.addEventListener(’focus’, this.onfocus.bind(this))
.addEventListener(’blur’, this.onblur.bind(this))
.addEventListener(’keyup’, this.onkeyup.bind(this))
.addEventListener(’keydown’, this.onkeydown.bind(this))
.addEventListener(’keypress’, this.onkeypress.bind(this));
}
. . . . . . . . . blah blah blah ALLLL that code . . . . .

Okay now… phew. Here is the IMPORTANT facts! notice in your options the AjaxURL line. This will have to be changed to the directory of your auto_complete_for_table_thing function. Now, you will want your auto_complete_for_table_thing in the CONTROLLER of whatever it is your searching in your database. In my case, I want to search through my database for Research Topics that have title’s and body’s. So, I want to put my auto_complete_for_table_thing function inside my topics controller. here is my example:

def auto_complete_for_table_thing # this is for the auto complete function in header.fbml.erb
topics = Topic.find(:all,
:conditions => [ page_title LIKE ?, params[:suggest_typed].downcase + ‘%’],
:limit => 30,
:order => ‘page_title ASC’).map { |n| n.page_title }
topics = topics.uniq
topics = topics[0...10]
render :text => “{fortext:#{params[:suggest_typed].to_json},results:#{topics.to_json}}”
end

notice the differences in my table to the suggested one. I made some changes (which you will have to make to) to make it work correctly for my usage. First I am searching through all of my topics objects in the database. I am using the :conditions => hash to tell it im looking for all instances where the topics “page_title” is LIKE ? (a MySQL command) the suggested type (what was entered inside the search bar). I chose page_title because that is intuitively what a user would be looking for. Example: if the user wanted to know something about Philosophy, most of my topics with have in its page_title Philosophy of …. Philosophy of … etc etc etc. That way, it will now be picked up during the AJAX call. I also had to uniq my topics because I had many topics with the same page_title as another one, this got rid of the ugly duplicates in the suggested topic results. This is not necessary unless you are getting multiple of the same objects you are looking for.

Okay, now so you created your auto_complete_for_table_thing function in your controller. You must make sure your AjaxUrl in your options is linked to it correctly like mine is.
ajaxUrl: _hostname+"/topics/auto_complete_for_table_thing", // url to your data source
you may have to play with the link to get it pointed to your specific controller which contains the auto_complete function in it. Once its pointed correctly and you have inserted the neccessary JavaScript code given in the example, you will have to now create the actual search bar. There are many ways to create a search bar but I will show you my example. This also is in my layouts/_header.fbml.erb file. (this should be in the same file as the JavaScript and options.
example:

input id=”search_box_topics” autocomplete=”off” maxlength=”20″ type=”text”/>
input type=”button” value=”search” onClick=”suggestr.options.onEnter(suggestr.obj.getValue());”/>
var suggestr = new ajaxSuggestFbml(document.getElementById(’search_box_topics’),options);

this creates the search box and starts up your ajaxSuggestFbml java script function. Once this is put in KABLAM, it should work. If it doesn’t work you should check main things:
1) your options and javascript is in the desired file
2) your search box is in the same file as the java script
3) your auto complete is in your controller and is set correctly
4) your AjaxUrl is pointing correctly to the /controller/auto_complete_for_table_thing

with all of that correctly set up you should have a working auto complete search box connected to objects in your database!

Hope everything works out and that this was helpful!

P.S. Whatever you are searching for (be it first names, last names, titles) should be INDEXED in your migration. This will allow for faster database searching and will shave off a lot of seconds of “would be wait time” for users to get the search results. Google on indexing a column for MySQL databses, because that is what I used for mine.

source: justinbgood.wordpress

 Original Source: