Follow Fang!: Dropbox API 搜尋文件

2017/02/18
Dropbox API 搜尋文件

執行結果：
Code：
<!DOCTYPE html>
<html lang="zh-TW">
 <head>
  <meta charset="utf-8">
  <meta name="description" content="Ref http://dropbox.github.io/dropbox-sdk-js/global.html">
  <meta name="author" content="C.Y. Fang">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js"></script>
  <script type="text/javascript">
   var list;
   var dbx;

   function onInit(){
    list = document.getElementById("list");
    dbx = new Dropbox({ accessToken: 'token' });
   }

   function search(){
    list.innerHTML = "";
    var searchText = document.getElementById('searchText').value;
    dbx.filesSearch({
     path: "/Paper",
     query: searchText,
     start: 0,
     max_results: 1000,
     mode: "filename"
    }).then(function(response){
     var papers = response.matches;
     if(papers.length!=0){
      for(var i=0;i<papers.length;i++){
       list.innerHTML += '<p>'+papers[i].metadata.name+'</p>';
      }
     }else{
      list.innerHTML = "找不到你搜尋的文件!";
     }
    });
   }
  </script>
 </head>
 <body onload="onInit()">
  <div class="form-group">
   <label for="searchText">請輸入你要搜尋的文件：</label>
   <input type="text" class="form-control" id="searchText" onkeyup="search()" style="width: 30%;">
   <div id="list" class="form-group"></div>
  </div>
 </body>
</html>