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

如何解决如何将属性传递给jquery自动完成功能

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

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

到目前为止，让它正常工作一直没有问题，但是现在我遇到了问题，确实需要一些帮助。

我有一个用于大型数据库的数据输入表格。没什么特别的，但是具有许多字段和大约80％数据的非常大的数据库是简单的文本字段，具有非常相似或重复的值，但仍然变化很大，除自动完成功能外，其他任何事情都不会使生活变得更轻松。这可能非常耗时且乏味，尤其是当数据库是1M +记录时。

因此，由于我大约需要查询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多次，这似乎很荒谬！

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

解决方法

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

});

,

我注意到的第一件事是，您在 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 ); 
            } );
            
        }    

    } );

} );