1

從Wikidata API填充自動完成我遇到問題。我有代碼來填充自動填充使用wipipedia使用wikidata api的結果我已經使用了下面的git hub資源。通過傳遞類別

我的HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Implementing Autocomplete Search using Wikipedia OpenSearch API - Demo by W3lessons</title> 
 
<style> 
 
body { 
 
     background: #a8a8a8 url(bg.png); 
 
\t \t background-repeat:no-repeat; 
 
\t \t margin:0 auto; 
 
\t \t padding:0; 
 
     color: #7f7f7f; 
 
\t \t font-family:Arial, Helvetica, sans-serif; 
 
\t \t font-size:13px; 
 
\t \t line-height:18px; 
 
\t \t width:100%; 
 
    } 
 
h1 { color:#F7F7F7; font-size:24px; font-weight:normal; } 
 
#search input { 
 
\t \t background: none repeat scroll 0 0 #fff; 
 
\t \t border: 0 none; 
 
\t \t color: #7F7F7F; 
 
\t \t float: left; 
 
\t \t font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif; 
 
\t \t height: 20px; 
 
\t \t margin: 0; 
 
\t \t padding: 10px; 
 
\t \t transition: background 0.3s ease-in-out 0s; 
 
\t \t width: 300px; 
 
\t } 
 
\t 
 
\t #search button { 
 
\t \t background: url("search.png") no-repeat scroll center center #7eac10; 
 
\t \t cursor: pointer; 
 
\t \t height: 40px; 
 
\t \t text-indent: -99999em; 
 
\t \t transition: background 0.3s ease-in-out 0s; 
 
\t \t width: 40px; 
 
\t \t border: 2px solid #fff; 
 
\t } 
 
\t 
 
\t #search button:hover { 
 
\t \t background-color:#000; 
 
\t } 
 
\t 
 
</style> 
 
</head> 
 

 
<body> 
 
\t <center> 
 
<script type="text/javascript"><!-- 
 
google_ad_client = "ca-pub-5104998679826243"; 
 
/* mysite_indivi */ 
 
google_ad_slot = "0527018651"; 
 
google_ad_width = 728; 
 
google_ad_height = 90; 
 
//--> 
 
</script> 
 
<script type="text/javascript" 
 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
 
</script> 
 
</center> 
 
    <div style="width:50%; margin:0 auto;"> \t 
 
    \t <p style="margin:20px;"><img src="http://w3lessons.info/logo.png" /></p> 
 
    \t <div style="margin:20px;"> 
 
      <h1>Autocomplete Search using Wikipedia Opensearch API</h1> 
 

 
      <form method="get" id="search"> 
 
       <input type="text" class="searchbox" value="Type here.. " onblur="if(this.value == '') { this.value = 'Type here..'; }" onfocus="if(this.value == 'Type here..') { this.value = ''; }" name="s"> 
 
       <button type="submit">Submit</button> 
 
      </form> \t 
 

 

 

 

 

 

 

 
    
 

 

 

 
    </div> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<script type="text/javascript"> 
 
$(".searchbox").autocomplete({ 
 
    source: function(request, response) { 
 
     console.log(request.term); 
 
     $.ajax({ 
 
      url: "http://en.wikipedia.org/w/api.php", 
 
      dataType: "jsonp", 
 
      data: { 
 
       'action': "opensearch", 
 
       'format': "json", 
 
       'search': request.term 
 
      }, 
 
      success: function(data) { 
 
       response(data[1]); 
 
      } 
 
     }); 
 
    } 
 
}); 
 
</script> 
 
</body> 
 
</html>

我的問題是我想在想如果我可以使用這個自動完成對網頁視頻特定類別自動完成獲取數據,那麼它應該顯示結果只與視頻自動完成相關或對於音樂,它應該顯示只填充音樂類別結果自動完成等等,從哪個類別需要到

+0

我設法使用API​​和自動完成工作。但我想要做的是不知何故,我可以傳遞類別字符串或類似的API,所以我只給出該類別的結果。目前它只是匹配輸入的字符串,並給出所有結果沒有任何類別的分離 就像我搜索「PH」它給出了PHP作爲結果以及物理,所以我想以某種方式將它分類,以便我可以獲取或只填寫特定類別在自動完成結果 – Jaswinder

+0

有反正我可以將searchcategory傳遞給wikidata api,這樣我只能獲取數據並在該類別中填充自動完成 – Jaswinder

回答

1

操作:opensearch用於自動完成。使用regular searchincategory:<category_name> prefix:<word_prefix>