如何将jQuery文件与googledriveapi相结合？

我发现了2个JavaScript库

一个是“”，另一个是“”

我选择了“conutryv2”函数，该函数在“jquerytypeahead搜索”页面中演示。我希望数据源（url）来自“JavaScript快速启动”中的“listFiles（）”函数

JavaScript快速启动：

驱动API快速启动
驱动API快速启动

授权
退出
var CLIENT_ID='603464653206-shrjn8lfsu1uahjd1v7f1rcpgcdlhc03.apps.googleusercontent.com'；
var DISCOVERY_DOCS=[”https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
var作用域https://www.googleapis.com/auth/drive.metadata.readonly';
var authorizeButton=document.getElementById（'authorized-button'）；
var signburatton=document.getElementById（'signout-button'）；
函数handleClientLoad（）{
load（'client:auth2'，initClient）；
}
函数initClient（）{
gapi.client.init({
发现法团：[”https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
clientId:'603464653206-shrjn8lfsu1uahjd1v7f1rcpgcdlhc03.apps.googleusercontent.com'，
范围：'https://www.googleapis.com/auth/drive.metadata.readonly'
}).然后（函数（）{
gapi.auth2.getAuthInstance（）.isSignedIn.listen（updateSigninStatus）；
updateSigninStatus（gapi.auth2.getAuthInstance（）.isSignedIn.get（））；
authorizeButton.onclick=handleAuthClick；
SignerButton.onclick=handleSignoutClick；
});
}
函数updateSigninStatus（isSignedIn）{
如果（伊西涅丁）{
authorizeButton.style.display='none'；
signexputton.style.display='block'；
listFiles（）；
}否则{
authorizeButton.style.display='block'；
signexputton.style.display='none'；
}
}
函数handleAuthClick（事件）{
gapi.auth2.getAuthInstance（）.signIn（）；
}
函数handleSignoutClick（事件）{
gapi.auth2.getAuthInstance（）.signOut（）；
}
函数appendPre（消息）{
var pre=document.getElementById（'content'）；
var textContent=document.createTextNode（message+'\n'）；
pre.appendChild（文本内容）；
}
函数listFiles（）{
gapi.client.drive.files.list({
“页面大小”：10，
“字段”：“下一个GetOken，文件（id、名称、WebContent链接）”
}).然后（功能（响应）{
appendPre（'Files:'）；
var returnedFiles=response.result.files；
if（returnedFiles&&returnedFiles.length>0）{
对于（var i=0；i

jQueryTypeahead搜索：

美元.提前打印({
输入：'.js-typeahead-country_v2'，
最小长度：2，
maxItem:！1，
命令：“asc”，
href:“https://en.wikipedia.org/?title={{display}}“，
模板：“{{display}}{{group}}”，
资料来源：{
国家：{
阿贾克斯：{
url:“country_v2.json”，
路径：“数据。国家”
}
},
资本：{
阿贾克斯：{
类型：“POST”，
url:“country_v2.json”，
路径：“data.capital”，
数据：{
myKey:“myValue”
}
}
}
},
回拨：{
onNavigateAfter:函数（节点、lis、a、项、查询、事件）{
if（~[38,40].indexOf（event.keyCode））{
var resultList=node.closest（“form”）.find（“ul.typeahead\uu列表”），
activeLi=lis.filter（“li.active”），
offsetTop=activeLi[0]&&activeLi[0]。offsetTop-（resultList.height（）/2）| | 0；
结果列表：scrollTop（offsetTop）；
}
},
onClickAfter：函数（节点、a、项、事件）{
event.preventDefault（）；
var r=confirm（“您将被重定向到：\n”+item.href+“\n\n是否继续？”）；
如果（r==true）{
打开（item.href）；
}
$（“#结果容器”）.text（“”）；
},
onResult：函数（节点、查询、结果、结果计数）{
如果（查询==“”）返回；
var text=“”；
if（result.length>0&&result.length元素的“”+result.length+”；
}否则如果（result.length>0）{
text='显示'+result.length+'匹配“+query+'”的元素；
}否则{
text='没有匹配'+query+''的结果'；
}
$（'#结果容器'）.html（文本）；
},
onMouseCenter：函数（节点、a、项、事件）{
如果（项目组==“国家”）{
$（a）.附加（“”）
}
},
onMouseLeave：函数（节点、a、项、事件）{
$（a）.find（'.flag chart'）.remove（）；
}
}
});

---

如何使来自Google Drive API的数据成为jQueryTypeAhead库的源？

您可以尝试一下。在函数中包装字体声明

<script>
function initTypeHead(fileName){
$.typeahead({
    input: '.js-typeahead-country_v2',
    minLength: 2,
    maxItem: !1,
    order: "asc",
    href: "https://en.wikipedia.org/?title={{display}}",
    template: "{{display}} <small style='color:green;'>{{group}}</small>",
    source: {
        country: {
            ajax: {
                url: fileName,
                path: "data.country"
            }
        },
        capital: {
            ajax: {
                type: "POST",
                url: fileName,
                path: "data.capital",
                data: {
                    myKey: "myValue"
                }
            }
        }
    },
    callback: {
        onNavigateAfter: function(node, lis, a, item, query, event) {
            if (~[38, 40].indexOf(event.keyCode)) {
                var resultList = node.closest("form").find("ul.typeahead__list"),
                    activeLi = lis.filter("li.active"),
                    offsetTop = activeLi[0] && activeLi[0].offsetTop - (resultList.height() / 2) || 0;

                resultList.scrollTop(offsetTop);
            }

        },
        onClickAfter: function(node, a, item, event) {

            event.preventDefault();

            var r = confirm("You will be redirected to:\n" + item.href + "\n\nContinue?");
            if (r == true) {
                window.open(item.href);
            }

            $('#result-container').text('');

        },
        onResult: function(node, query, result, resultCount) {
            if (query === "") return;

            var text = "";
            if (result.length > 0 && result.length < resultCount) {
                text = "Showing <strong>" + result.length + "</strong> of <strong>" + resultCount + '</strong> elements matching "' + query + '"';
            } else if (result.length > 0) {
                text = 'Showing <strong>' + result.length + '</strong> elements matching "' + query + '"';
            } else {
                text = 'No results matching "' + query + '"';
            }
            $('#result-container').html(text);

        },
        onMouseEnter: function(node, a, item, event) {

            if (item.group === "country") {
                $(a).append('<span class="flag-chart flag-' + item.display.replace(' ', '-').toLowerCase() + '"></span>')
            }

        },
        onMouseLeave: function(node, a, item, event) {

            $(a).find('.flag-chart').remove();

        }
    }
});
}

函数initTypeHead（文件名）{
美元.提前打印({
输入：'.js-typeahead-country_v2'，
最小长度：2，
马克西
<head>
<!-- Optional CSS -->
<link rel="stylesheet" href="jquery.typeahead.min.css">
<link rel="stylesheet" href="deco.css">
<!-- Required JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="jquery.typeahead.min.js"></script>
</head>
<body>
<var id="result-container" class="result-container"></var>

<form id="form-country_v2" name="form-country_v2">
    <div class="typeahead__container">
        <div class="typeahead__field">

            <span class="typeahead__query">
            <input class="js-typeahead-country_v2" name="country_v2[query]" placeholder="Search" autocomplete="off" type="search">
        </span>
            <span class="typeahead__button">
            <button type="submit">
                <i class="typeahead__search-icon"></i>
            </button>
        </span>

        </div>
    </div>
</form>
<script>
    $.typeahead({
        input: '.js-typeahead-country_v2',
        minLength: 2,
        maxItem: !1,
        order: "asc",
        href: "https://en.wikipedia.org/?title={{display}}",
        template: "{{display}} <small style='color:green;'>{{group}}</small>",
        source: {
            country: {
                ajax: {
                    url: "country_v2.json",
                    path: "data.country"
                }
            },
            capital: {
                ajax: {
                    type: "POST",
                    url: "country_v2.json",
                    path: "data.capital",
                    data: {
                        myKey: "myValue"
                    }
                }
            }
        },
        callback: {
            onNavigateAfter: function(node, lis, a, item, query, event) {
                if (~[38, 40].indexOf(event.keyCode)) {
                    var resultList = node.closest("form").find("ul.typeahead__list"),
                        activeLi = lis.filter("li.active"),
                        offsetTop = activeLi[0] && activeLi[0].offsetTop - (resultList.height() / 2) || 0;

                    resultList.scrollTop(offsetTop);
                }

            },
            onClickAfter: function(node, a, item, event) {

                event.preventDefault();

                var r = confirm("You will be redirected to:\n" + item.href + "\n\nContinue?");
                if (r == true) {
                    window.open(item.href);
                }

                $('#result-container').text('');

            },
            onResult: function(node, query, result, resultCount) {
                if (query === "") return;

                var text = "";
                if (result.length > 0 && result.length < resultCount) {
                    text = "Showing <strong>" + result.length + "</strong> of <strong>" + resultCount + '</strong> elements matching "' + query + '"';
                } else if (result.length > 0) {
                    text = 'Showing <strong>' + result.length + '</strong> elements matching "' + query + '"';
                } else {
                    text = 'No results matching "' + query + '"';
                }
                $('#result-container').html(text);

            },
            onMouseEnter: function(node, a, item, event) {

                if (item.group === "country") {
                    $(a).append('<span class="flag-chart flag-' + item.display.replace(' ', '-').toLowerCase() + '"></span>')
                }

            },
            onMouseLeave: function(node, a, item, event) {

                $(a).find('.flag-chart').remove();

            }
        }
    });

</script>
</body>
</html>

<script>
function initTypeHead(fileName){
$.typeahead({
    input: '.js-typeahead-country_v2',
    minLength: 2,
    maxItem: !1,
    order: "asc",
    href: "https://en.wikipedia.org/?title={{display}}",
    template: "{{display}} <small style='color:green;'>{{group}}</small>",
    source: {
        country: {
            ajax: {
                url: fileName,
                path: "data.country"
            }
        },
        capital: {
            ajax: {
                type: "POST",
                url: fileName,
                path: "data.capital",
                data: {
                    myKey: "myValue"
                }
            }
        }
    },
    callback: {
        onNavigateAfter: function(node, lis, a, item, query, event) {
            if (~[38, 40].indexOf(event.keyCode)) {
                var resultList = node.closest("form").find("ul.typeahead__list"),
                    activeLi = lis.filter("li.active"),
                    offsetTop = activeLi[0] && activeLi[0].offsetTop - (resultList.height() / 2) || 0;

                resultList.scrollTop(offsetTop);
            }

        },
        onClickAfter: function(node, a, item, event) {

            event.preventDefault();

            var r = confirm("You will be redirected to:\n" + item.href + "\n\nContinue?");
            if (r == true) {
                window.open(item.href);
            }

            $('#result-container').text('');

        },
        onResult: function(node, query, result, resultCount) {
            if (query === "") return;

            var text = "";
            if (result.length > 0 && result.length < resultCount) {
                text = "Showing <strong>" + result.length + "</strong> of <strong>" + resultCount + '</strong> elements matching "' + query + '"';
            } else if (result.length > 0) {
                text = 'Showing <strong>' + result.length + '</strong> elements matching "' + query + '"';
            } else {
                text = 'No results matching "' + query + '"';
            }
            $('#result-container').html(text);

        },
        onMouseEnter: function(node, a, item, event) {

            if (item.group === "country") {
                $(a).append('<span class="flag-chart flag-' + item.display.replace(' ', '-').toLowerCase() + '"></span>')
            }

        },
        onMouseLeave: function(node, a, item, event) {

            $(a).find('.flag-chart').remove();

        }
    }
});
}

function listFiles() {
    gapi.client.drive.files.list({
        'pageSize': 10,
        'fields': "nextPageToken, files(id, name, webContentLink)"
    }).then(function(response) {
        appendPre('Files:');
        var returnedFiles = response.result.files;
        if (returnedFiles && returnedFiles.length > 0) {
            for (var i = 0; i < returnedFiles.length; i++) {
                var file = returnedFiles[i];
                appendPre(file.name + ' (' + file.id + ')' + file.webContentLink);
            }
            initTypeHead(returnedFiles);
        } else {
            appendPre('No files found.');
        }
    });
}