Autocomplete in Joomla 2.5

Question

I'm trying to make a Joomla component (2.5) and I need an autocomplete input or type-ahead, it doesn't matter. I tried a lot of things from the internet, but they didn't work.

Can I get a basic working code ?

HTML

    <div>
        <h2>Example</h2>
        <div class="demo">
            <input class="typeahead" type="text" placeholder="Start typing..."/>
        </div>
    </div>

JS

$(document).ready(function() {
  $('.typeahead').typeahead({
    local: ["Bachelor of Science","Bachelor of Science in Accounting"]
  });  
})

Answer 1

If you do not wish to deal with javascript, you can use something like PHP Autocomplete control from PHP Autocomplete website.

Code Sample (without using jQuery):

$pac = new C_PhpAutocomplete('company');
$pac -> display('SELECT'); // an existing <select> tag

Taken from: http://phpautocomplete.com/examples/your-first-autcomplete/

Answer 2

Please ensure jquery is load on the page you are implementing the code.

To easy add jquery to your site you can install jb library http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin

you should also change $ to jQuery to avoid conflict.

    jQuery(document).ready(function() {
      jQuery('.typeahead').typeahead({
          local: ["Bachelor of Science","Bachelor of Science in Accounting"]
       });  
    })

Note remember also to add the typeahead.js to the page as the first php statement by using the following code;

   $document = JFactory::getDocument();
   $document->addScript('path_to_typeahead/typeahead.js';