0

I want to use jquery autocomplete jquery plugin, I test below code but nothing happend, I check, the file added correctly and there is not js error.

function imodbdev_form_alter(&$form,$form_state,$form_id){
  if($form_id='movie_node_form'){
      drupal_add_library('system', 'drupal.autocomplete');
      drupal_add_js(drupal_get_path('module', 'imodbdev') . '/js/jquery.livequery.js', array('scope' => 'footer'));      
      drupal_add_js(drupal_get_path('module', 'imodbdev') . '/js/imodbdev.js', array('scope' => 'footer'));      
  }

}

and js/imodbdev.js file

(function($) {
    Drupal.behaviors.imodbdev = {
        attach: function(context) {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#edit-title" ).autocomplete({
source: availableTags
});
        }
    }
})(jQuery);

I had install jquery update module and set jquery version to 1.8 .
where is the problem?

update

after sometimes I type in textfield to test , I saw TypeError: c.curCSS is not a function in firebug, I search this error in google and suggestion in upgrade jquery ui to 1.9.3 but drupal not has version higher than 1.8.

  • Unrelated note: $form_state param should be &$form_state in the form alter function. – rooby Mar 12 '14 at 12:22
  • @rooby, not always !!! , we usually change the form, but if we need to change $form_sate pass it by ref. ;) – Yusef Mohamadi Mar 12 '14 at 12:25
  • Always pass form_state by reference in drupal. That's best practice anyways. – rooby Mar 12 '14 at 12:25
4

Yes, jQuery UI is available in drupal core.

To include libraries like that you need to call the drupal_add_library() function to load the required js & css.

For exmaple:

drupal_add_library('system', 'drupal.autocomplete');

So where you are adding your javascript, add that first.

For example:

// Add the jQuery UI autocomplete library.
drupal_add_library('system', 'drupal.autocomplete');
// Load the custom js for this module.
drupal_add_js(drupal_get_path('module', 'MODULE_NAME') . '/js/SCRIPT_FILE.js');

The caps lock parts need to be changed to suit your module.

As for where you would put this, I can't say unless I know where you are putting your code. It could be in your theme or in a custom module.

If it is in your theme then the drupal_add_js() part would be drupal_add_js(drupal_get_path('theme', 'THEME_NAME') . '/js/SCRIPT_FILE.js');

I'm also assuming your scripts are in a js sub-directory.

You also need to make sure that any custom js you have is inside a drupal behavior (or $(document).ready() at the very least). Otherwise your javascript will run to early in the page load before the text field even is on the page, so it will do nothing.

It will be like this:

(function ($) {
  Drupal.behaviors.yourThemeAutocomplete = {
    attach: function (context, settings) {
      // Your code goes here.
    }
  };
})(jQuery);

For more info see https://drupal.org/node/756722#behaviors (the whole page is useful info)

  • my js file added correctly and exists and run ,let's test drupal_add_library – Yusef Mohamadi Mar 12 '14 at 11:56
  • my js file and autocomplete.js file exist in script ( I check them in firebug) , but nothing happend when I type in '#edit-title' field . where is the problem? – Yusef Mohamadi Mar 12 '14 at 12:02
  • Hard to say. If you have no errors in your firebug console, then does #edit-title actually exist on the page? - Oh actually, is that code you posted the entire js file you have written or is that code inside a drupal behavior or document ready? – rooby Mar 12 '14 at 12:11
  • I will update my question with code, tnx for your atention – Yusef Mohamadi Mar 12 '14 at 12:15
  • In that case, if you don't have any js errors and #edit-title exists on the form I'm not sure off the top of my head. – rooby Mar 12 '14 at 12:25
2

Gleaned from above and a few different sources, this is what worked for me.

  1. add jquery.autocomplete to your render array
  2. add your data source to your render array
  3. add your custom JS to your render array
  4. code your custom JS

    '#attached' => array(
      'library' => array(
        array('system', 'ui.autocomplete'), // 1. add JQUI autocomplete
      ),
      'js' => array(
        array(
          'data' => array(
            'MYMODULE_autocomplete_list' => $my_php_array, // 2. add data
          ),
          'type' => 'setting',
        ),
        drupal_get_path('module', 'MYMODULE') . '/js/autocomplete.js',
        // 3. add custom js
      ),
    ),
    

    );

and in your MYMODULE/js/autocomplete.js as step 4:

(function ($) {
  Drupal.behaviors.myModuleAutocomplete = {
    attach: function (context, settings) {
      $("#ID-OF-INPUT-FIELD", context).autocomplete({
        source: Drupal.settings.MYMODULE_autocomplete_list
      });
    }
  };
})(jQuery);
0

It is because of jquery 1.8 used in drupal jquery, according to this issue just need to set jquery to 1.7 and everything work correctly,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.