如何将属性传递给 jquery 自动完成

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!

Answer 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);
    }
  });

});

Answer 2

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 ); 
            } );
            
        }    

    } );

} );