如何设置自动完成插件？答案

【问题标题】：How to setup autocomplete plugin?如何设置自动完成插件？
【发布时间】：2016-01-16 00:34:41
【问题描述】：

我有这段代码，我想从其他服务器接收 jsonp 格式的数据。但是自动完成没有显示任何建议或错误？这是插件页面https://goodies.pixabay.com/jquery/auto-complete/demo.html 和我的代码

$(function(){
    $('#hero-demo').autoComplete({
        source: function(term, response){
            $.getJSON('http://178.62.17.188/players/jQueryCallback/ro', { q: term         }, function(data){ response(data); });
        },
        dataType: "jsonp"
    });
});

【问题讨论】：

我检查了插件，我认为它没有源选项。
该页面与该插件 goodies.pixabay.com/jquery/auto-complete/demo.html 相同。在这里你看到那里说它支持 jsonp 。我需要它在下拉列表中而不是在警报中
你发的两个链接的来源不一样。第二个有源选项，但第一个没有。
那你能看看第二个吗？
能否请您也添加您的 HTML 代码？

标签： javascript jquery json ajax autocomplete

【解决方案1】：

我需要提供更多选项，这并不简单。这现在就像一个魅力。

  var xhr;
jQuery('.tableRow:last-child .tableTd').first().find('input').autoComplete({
    minChars: 2,
    jsonp: "callback",
    dataType: "jsonp",
    source: function(term, response){
          jQuery.ajax({
                    url: "http://api.someurl.com/players",
                    jsonp: "callback",
                    dataType: "jsonp",
                    data: {q: term, format: "json"},
                    success: function(data){response(data);}
        });
    },
    renderItem: function (item, search){
            // escape special characters
            if(!item.commonName == ""){
             return '<div class="autocomplete-suggestion" data-rating="'+ item.rating +'" data-cname="'+ item.commonName +'" data-val="'+search+'">'+ item.commonName + ' ('+ item.rating + ')' + '</div>';   
            }else{
             return '<div class="autocomplete-suggestion" data-rating="'+ item.rating +'" data-fname="'+item.firstName+'" data-lname="'+item.lastName+'" data-val="'+search+'">'+ item.firstName + ' ' + item.lastName + ' ('+ item.rating + ')' + '</div>';
                }
        },
    onSelect: function(e, term, item){
        if(!item.data('cname') == ""){
            jQuery('.tableRow:last-child .tableTd').first().find('input').val(item.data('cname'));
        }else{
            jQuery('.tableRow:last-child .tableTd').first().find('input').val(item.data('fname') + ' ' + item.data('lname'));
        }
        jQuery('.tableRow:last-child .tableTd').first().next().find('input').val(item.data('rating'));
    }
});

【讨论】：

【解决方案2】：

获取数据问题：

阻止加载混合的活动内容 "http://178.62.17.188/players/jQueryCallback/ro?q=t"

Mixed Content

Test fiddle（控制台）

$('#hero-demo').autoComplete({
    minChars: 1,
    source: function(term, response){
            $.getJSON('http://178.62.17.188/players/jQueryCallback/ro', { q: term         }, function(data){
                response(data); });
        },
    dataType: "jsonp"
});

编辑 1：

避免混合内容屏蔽的最佳策略是为所有内容为 HTTPS 而不是 HTTP。

对于您自己的域，将所有内容作为 HTTPS 提供并修复您的链接。通常，内容的 HTTPS 版本已经存在，而这只是需要在链接中添加“s” - http:// 到 https://。

对于其他域，如果可用，请使用站点的 HTTPS 版本。如果是 HTTPS 不可用，您可以尝试联系域并询问他们是否他们可以通过 HTTPS 提供内容。

使用https://178.62.17.188/players/jQueryCallback/ro?jQueryCallback=? 而不是http://178.62.17.188/players/jQueryCallback/ro

【讨论】：

goodies.pixabay.com/jquery/auto-complete/demo.html 这里你可以看看有源选项
您问题中存储库的链接是：link 1，您的评论中的链接是link 2。 两个不同的库
如果您从该 pixabay 页面查看，他们将链接到该存储库。你能看看支持源的第二个链接吗？
不，那是来自其他服务器的数据。我必须将这些数据传输到我的网站
@Bob Gaj，看我的Edit 1。