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

Question

我在尝试使用 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" />

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

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

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

说起来简单，做起来却异常困难。我的另一个选择是将自动完成语句复制 40 多次，这看起来很荒谬！

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

Answer 1

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

    } );

} );

Answer 2

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

});

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

How to pass attribute to jquery autocomplete

javascript

jquery

ajax

autocomplete