如何将属性传递给 jquery 自动完成
How to pass attribute to jquery autocomplete
我在尝试使用 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 多次,这看起来很荒谬!
所以有人可以给我一些指导吗?谢谢!
我注意到的第一件事是您在 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 );
} );
}
} );
} );
在 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 自动完成时遇到了严重的问题,而且 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 多次,这看起来很荒谬!
所以有人可以给我一些指导吗?谢谢!
我注意到的第一件事是您在 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 );
} );
}
} );
} );
在 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);
}
});
});