如何将属性传递给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" /> 

但由于某种原因，我无法将属性“data-autocomplete”的值传递给自动完成功能。它只是以未定义的形式出现，这对搜索至关重要

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

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

    } );

} );