Anyone can suggest autocomplete search

Question

I'm a total newbie and I'm looking for a way to have a search box with autocomplete just like google does.

I've searched and the best prospect that I've found seems to be this forum post. The guy who suggested it says he uses it with this project on google code which is dead on because I've managed to install searchable on my last attempt at figuring out cakephp.

The thing is, I've not used much javascript before and I'm a bit confused as to what exactly I'm meant to be doing. The documentation with the autocomplete codes doesn't go into any detail that I can understand.

If we assume that I manage to get searchable behaviour installed correctly, could any kind person explain to me how I would go about making the autocomplete work?

It says to just use:

 $("selector").autocomplete(url [, options]);

eg:

 $("#input_box").autocomplete("autocomplete_ajax.cfm");

Autocomplete expects an input element with the id "input_box" to exist. When a user starts typing in the input box, the autocompleter will request autocomplete_ajax.cfm with a GET parameter named q

thats the bit I don't get. Where am I meant to put that? And once I've put it somewhere then do I just need to name one of my inputs "input_box"?

thanks in advance.

Answer 1

You can try setting your source like so:

$("#input_box").autocomplete({source: "autocomplete_ajax.cfm"});

Answer 2

Method 1

Use this when you have predetermined set list of search options

jQuery code:

$(function() {
    var availableTags = [ //array of searchable options
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
});

HTML code:

<label for="tags">Tags: </label>
<input id="tags">

Source: http://jqueryui.com/autocomplete/

Method 2

Use this when you are searching a database for autocomplete suggestions

jQuery code:

$('input#input_box').keypress(function(){ //letter has been pressed
    var search = $(this).val();
    $.ajax({
        url : 'autocomplete_ajax.php', //the php page that will handle the request
        type : 'GET', //the method of sending the data
        data: 'q='+search, //the data you are sending
        success : function(data){
            //the variable 'data' will be whatever the php outputs (via
            //any method - echo, exit, print, print_r etc. you can
            //use data from php page to output wherever you want, e.g.
            $('div#search_autosuggestbox').html(data);
        }
    });
});

HTML:

<input id="input_box" />
<div id="search_autosuggestbox"></div>

EDIT: added page names/values corresponding to the question