How to pass attribute to jquery autocomplete

Question

I am having a serious problem with trying to use a jquery autocomplete and javascript is not my strongest skill.

I am using the jquery.auto-complete plugin found here: https://github.com/Pixabay/jQuery-autoComplete which is a rewrite of the devbridge.com version.

so far, getting it to work has been no problem, but now i am stuck with a problem and really need some help.

i have a form for data entry for a very large database. nothing special, but a very large database with lots of fields and about 80% of the data is simple text fields that have very similar or duplicated values, but still varied enough that nothing really other than an autocomplete will make life easier. this can be very time consuming and tedious, especially when database is 1M+ records.

so since i have around 40 fields that require lookups, this is my current code:

$(window).on('load', function () {
    var xhr;
    $('[data-autocomplete]').autoComplete({
        source: function(term, response){
            try { xhr.abort(); } catch(e){}
            xhr = $.get( '/api.php', 
                        { field: $(this).attr('data-autocomplete'),
                          search: term,
                         }, function(data){ response(data); });
        }
    });

...

and this is my field:

<input type="text" name="data[title]" id="data[title]" data-autocomplete="title" />

but for some reason, i can't get the value of the attribute "data-autocomplete" to be passed to the autocomplete function. it just comes up as undefined and that is critical for the search

what i need is a way that i can bind the autocomplete on page load to any text input with an attribute of "data-autocomplete" (so far so good) and then pass that value to the autocomplete thus creating an url of:

api.php?field=[data-autocomplete]&search=[term]

sounds simple, but seems to be exceedingly difficult. my other option is to duplicate the autocomplete statements some 40+ times and that just seems ridiculous!

so can somebody please give me some direction? thank you!

charlietfl · Accepted Answer · 2020-09-10 01:09:37Z

1

Loop over the elements in an each loop so you can isolate instances.

$('[data-autocomplete]').each(function() {
  let xhr,
      $input = $(this),
      field = $input.attr('data-autocomplete');

  $input.autoComplete({
    source: function(term, response) {
      try {
        xhr.abort();
      } catch (e) {}
      xhr = $.get('/api.php', { field: field, search: term}, response);
    }
  });

});

answered Sep 10, 2020 at 1:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

oddwick Over a year ago

Thank you this worked like a charm. i was so focused on generically binding to all autocomplete fields that i never thought of using a loop. i was trying to do something similar, but ended up bombing badly because javascript isnt my forte. this is exactly what i needed thank you!

critical_error · Accepted Answer · 2020-09-10 00:06:35Z

0

The first thing I notice is that you have an erroneous comma after the variable "term" in your get call:

xhr = $.get( '/api.php', 
  { 
    field: $(this).attr('data-autocomplete'),
    search: term, <-- code-breaking comma.
  }, function(data){ response(data); });

It's also possible that your get call's reference to this is no longer refferring to the expected object.

Try something like this instead:

$( window ).on( 'load', function () {

    let xhr, me = this;

    $( '[data-autocomplete]' ).autoComplete( {

        source: function( term, response ) {

            try { xhr.abort(); } catch( e ){}

            xhr = $.get(  '/api.php', 
                { 
                    field: $( me ).attr( 'data-autocomplete' ), 
                    search: term
                }, 
                function( data ){ response( data ); 
            } );
            
        }    

    } );

} );

answered Sep 10, 2020 at 0:06

critical_error

6,8263 gold badges16 silver badges17 bronze badges

3 Comments

charlietfl Over a year ago

this is window the way you have it set up here

oddwick Over a year ago

yes i gave this a try first off and this ended up being window and didnt work

critical_error Over a year ago

Whoops! Yes. This should have been inside the function, not the window binding.

Collectives™ on Stack Overflow

How to pass attribute to jquery autocomplete

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related