使用源数据属性自动完成？答案

【问题标题】：Autocomplete using data attribute for source?使用源数据属性自动完成？
【发布时间】：2012-04-03 14:16:38
【问题描述】：

我可以使用数据属性作为自动完成的来源吗？

例如

HTML

 <input type="text" class="autocomplete" data-source="/search.php" />

Javascript

  $(".autocomplete").autocomplete({
        source :  $(this).data('source'),
        minLength:1,
        select: function( event, ui ) {
            console.log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });

我试过了，但它总是给我一个错误。我的代码有什么问题？

Uncaught TypeError: Property 'source' of object #<Object> is not a function

【问题讨论】：

这不是一个好的解决方案。在每次按键时，您都会重新初始化自动完成小部件，这意味着即使在适度使用之后，也会将数百个事件侦听器添加到每个 .autocomplete 元素。我强烈建议您使用其他解决方案。（也许是下面列出的三个之一？）
如果您修复了它，请写一个答案。答案不在问题中。

标签： javascript jquery ajax autocomplete

【解决方案1】：

在源代码中你可以使用 this.element 来引用输入

$(".autocomplete").autocomplete({
   source :  this.element.attr('data-source'),
   minLength:1,
   select: function( event, ui ) {
   console.log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

【讨论】：

好答案。很好很简单:-)
在我的上下文中，this 指的是窗口元素，因此此解决方案不起作用。我想避免在不引用 .autocomplete 类的情况下引用数据源。

【解决方案2】：

这是解决方法

$('.autocomplete').keypress(function(){ 
    $(this).autocomplete({ 
        source: $(this).data('source'), 
        minLength: 1, 
        select: function(event, ui) { 
            console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); 
        } 
    }); 
});

我添加了一个按键功能，以便它可以获取当前元素。

【讨论】：

很好的解决方案，一直想知道如何做到这一点。就我个人而言，我用 .each 替换了，否则（大概）每次按下按键时，整个自动完成都会反弹。
所以这很糟糕，因为它每次在该框中按下一个键时都会实例化自动完成控件。您可以单独获取$('.autocomplete').data('source')，然后将其传递给自动完成调用。

【解决方案3】：

this 指针不引用 .autocomplete 元素 -- this 仅等于 jquery 执行的回调中的选定元素。看起来你想做这样的事情：

$(".autocomplete")
    .autocomplete({
        minLength:1,
        select: function( event, ui ) {
            console.log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    })
    .each(function() { // Goes through `.autocomplete` elements and sets source
        $(this).autocomplete("option", "source", $(this).data('source'));
    })
;

【讨论】：

我不是 100% 确定你的意思，但这听起来像是服务器端的问题。确保您是服务器端代码通过名为 term 的 url 查询参数中的值过滤您的列表。

【解决方案4】：

如果源是 url，则自动完成的每次击键都会触发远程请求。你可以做的是“预取”数据（确保返回一个 JSON 有效的数组），然后将返回数据添加为自动完成的源。这样，数据只会获取一次，自动完成将引用该数据。

jQuery 自动完成功能已经具备过滤功能。你只需要一个完整的项目列表，它会为你过滤它。

//get all input boxes with class "autocomplete"
$('.autocomplete').each(function(){

    //reference input and get it's url
    var input = $(this);
    var url = input.data('source');

    //get list array only ONCE for each input using their specified urls
    $.get(url, function(data) {

        //when request is received, add autocomplete using the returned data
        input.autocomplete({
            source: data,
            minLength: 1,
            select: function(event, ui) {
                console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
            }
        });
    });
});

【讨论】：

谢谢，但我有很多自动完成元素。它只获取第一个元素的数据源