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

Question

我在尝试使用 jquery 自动完成功能时遇到了严重的问题，而 javascript 并不是我最擅长的技能。

我正在使用在此处找到的 jquery.auto-complete 插件： https : //github.com/Pixabay/jQuery-autoComplete ，它是 devbridge.com 版本的重写。

到目前为止，让它工作没有问题，但现在我遇到了一个问题，真的需要一些帮助。

我有一个非常大的数据库的数据输入表单。 没什么特别的，但是一个非常大的数据库有很多字段和大约 80% 的数据是简单的文本字段，它们具有非常相似或重复的值，但仍然有足够的变化，除了自动完成之外，没有什么能让生活更轻松。 这可能非常耗时且乏味，尤其是当数据库有 100 万条记录时。

所以因为我有大约 40 个需要查找的字段，这是我当前的代码：

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

...

这是我的领域：

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

但由于某种原因，我无法获得要传递给自动完成功能的属性“数据自动完成”的值。 它只是未定义，这对搜索至关重要

我需要的是一种方法，我可以将页面加载时的自动完成绑定到具有“数据自动完成”属性的任何文本输入（到目前为止很好），然后将该值传递给自动完成，从而创建以下网址：

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

听起来很简单，但似乎非常困难。 我的另一个选择是将自动完成语句复制 40 次以上，这看起来很荒谬！

所以有人可以给我一些指导吗？ 谢谢你！

Answer 1

循环遍历each循环中的元素，以便您可以隔离实例。

$('[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

我注意到的第一件事是在get调用中的变量“term”后面有一个错误的逗号：

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

您的get调用对this的引用也可能不再指向预期的对象。

试试这样的：

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

    } );

} );