By jerome72 on

Hi,

I have a module in which I implemented an ajax search box. However I would like to have a similar search box as the one on api.drupal.org, with a scroll bar and the possibility to hit "return" once to show the result. I think it depends on the jquery version, but I'm not sure.

If anyone knows how to do it, please tell me...

Help greatly appreciated.

Cheers from France
Jerome

⋅ Categories: Drupal 6.x

Comments

jerome72’s picture

jerome72 commented

Nobody knows ?

macieq’s picture

macieq commented

the same problem. How to do this?

docwilmot’s picture

docwilmot commented

http://drupal.org/project/autocomplete_element
or
http://drupal.org/project/autocomplete_deluxe

these are the closest to what you want so far i think.

-------------------------------------------------
Always be nice to people on the way up; because you'll meet the same people on the way down.
Wilson Mizner (1876 - 1933)

danchadwick’s picture

danchadwick commented

Bingo. autocomplete_element is EXACTLY what the OP requested. I have yet to customize it to do some a few things that I need (like requesting autocomplete with a blank search term), but is seems very flexible and is using the jQuery autocomplete plugin like api.drupal.org. It has an option to replace the core drupal autocomplete or leave it functional.

There is also an open issue to replace the existing core drupal autocomplete with jQuery autocomplete, presumably obsoleting this module. Given that I'm investing in customization, I think I'd rather do that with something that has a future, rather than core autocomplete that may go away in D8.

http://drupal.org/project/autocomplete_element

jerome72’s picture

jerome72 commented

Yes. This is perfectly what I wanted and it rocks!
Now I would like my autocomplete form to autosubmit when I click on a result, just like api.drupal.org.

I tried to add the code below to my custom module, but it does nothing (no submission happens):

drupal_add_js("Drupal.behaviors.autocomplete_element = function (context) {
    $('input.autocomplete').result(function(event, data, formatted) {
      $(this).parentsUntil('form').parent().submit();
    });
  }", 'inline');

I "stole" that code on an issue posted on the autocomplete_element module. The guy posted that code to ask the developer to add an autosubmit functionality to the module: http://drupal.org/node/980882

Any idea ?

Thank you so much

harryspink’s picture

harryspink commented

Alternatively you can use Drupal core code to achieve this.

A hook_form, hook_menu, menu_callback function.

Initially create your form, keep the type as textfield however set an autocomplete path. This tells Drupal that each time the textfield value changes it should post to the menu item each time and check for suggestions.

function hook_form(){  
  $form['test_item'] = array(   
    '#type' => 'textfield',   
    '#autocomplete_path' => 'my_module/autocomplete'  
    ); 
  }

Then create a menu item which will callback a function in the module

function hook_menu() {  
  $item['my_module/autocomplete'] = array(   
    'callback' => 'my_module_autocomplete',   
    'access' => user_access('access example autocomplete')  
    ); 
  }

Then create a function which the hook menu calls which generates a JSON array of results. $string will be the current textfield value.

function my_module_autocomplete($string){
    //Do a DB call or something similar then build up an array of suggestion
    $return_suggestions = array();
    while($suggestion = db_fetch_object($suggestions)){
        $return_suggestions[] = $suggestion->value;
    }
    return drupal_to_js($return_suggestions);
}
docwilmot’s picture

docwilmot commented

harry, that doesnt do what the poster asked though, it only builds a typical core-style ajax autocomplete list. the one on api.drupal i think uses jquery autocomplete, and has the scrollbars and highlighted suggestions.

-------------------------------------------------
Always be nice to people on the way up; because you'll meet the same people on the way down.
Wilson Mizner (1876 - 1933)

harryspink’s picture

harryspink commented

Correct, it does not do 100% what the user wants, however it does return a list of results defined by the PHP script. This means the poster would be in full control of the returned JSON object, thus returning the results he desires. Regarding the scrollbars and the highlight, you could do that in a handful of lines of JQuery and CSS.

I do agree the modules suggested would be easier; I was merely offering a more customisable alternative.