jQuery Autocomplete using extraParams to pass additional GET variables

Question

I am referring specifically to the jQuery Autocomplete v1.1 plugin by Jörn Zaefferer [source: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] as there seems to be quite a few variations of this plugin.

I'm trying to pass additional parameters to the server when the user starts typing because I have multiple fields that I want autocomplete to provide suggestions for.

In addition to the query, I want to send the input name attribute to the server but I can't seem to use $(this).attr('name') within the extraParams.

My jQuery:

   $('.ajax-auto input').autocomplete('search.php', {
     extraParams: {
      search_type: function(){
       return $(this).attr('name');
      }
     }
   })

This is my HTML.

 <form method="post" action="#" id="update-form" autocomplete="off">
  <ol>
         <li class="ajax-auto">
             <label for="form-initials">Initials</label>
                <input type="text" id="form-initials" name="initials" />
            </li>
         <li class="ajax-auto">
             <label for="form-company">Company</label>
                <input type="text" id="form-company" name="company" />
            </li>
  </ol>
 </form>

Any suggestions?

Answer 1

I am not sure why it is not working.

But you can first check/debug for value of $(this).attr('name').

Also one more thing as here explained [in options tab], you can check with Firebug to see ajax post request(for url and it's data) which will help you to resolve the problem.

Answer 2

While less than ideal, I've hacked/modified the plugin to get it to work for me.

Simply, I've altered the AJAX jQuery function within the plugin.

Around line 363 you'll see:

        $.ajax({
            // try to leverage ajaxQueue plugin to abort previous requests
            mode: "abort",
            // limit abortion to this input
            port: "autocomplete" + input.name,
            dataType: options.dataType,
            url: options.url,
            data: $.extend({
                q: lastWord(term),
                search_type: $(input).attr('name'), // my mod to pickup multiple fields
                limit: options.max
            }, extraParams),
            success: function(data) {
                var parsed = options.parse && options.parse(data) || parse(data);
                cache.add(term, parsed);
                success(term, parsed);
            }
        });

I'm still looking for an elegant solution to this so feel free to keep suggestions coming.

Answer 3

Try this:

$('.ajax-auto input').setOptions({ extraParams: { search_type: function(){ return $(this).attr('name'); } } })

or visite here