Question

我有这个代码，我想以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"
    });
});

Answer 1

获取数据问题：

阻止加载混合活动内容＆＃34; http://178.62.17.188/players/jQueryCallback/ro?q=t＆＃34;

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版本已经存在，而这只是   需要添加＆＃34; s＆＃34;链接 - http：//到https：//。

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

使用https://178.62.17.188/players/jQueryCallback/ro?jQueryCallback=?代替http://178.62.17.188/players/jQueryCallback/ro

Answer 2

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

  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 个答案: