問題が発生しました。次のgitハブリソースを使用したwikidata apiを使用して、wipipediaからの結果でオートコンプリートを埋めるコードがあります。
私の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);
background-repeat:no-repeat;
margin:0 auto;
padding:0;
color: #7f7f7f;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:18px;
width:100%;
}
h1 { color:#F7F7F7; font-size:24px; font-weight:normal; }
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
</style>
</head>
<body>
<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;">
<p style="margin:20px;"><img src="http://w3lessons.info/logo.png" /></p>
<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>
</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>私の問題は、ページ内のビデオでこのオートコンプリートを使用できる場合のように、特定のカテゴリのオートコンプリートでデータを取得したいことです。ビデオのオートコンプリートに関連する結果のみを表示する必要があります。どのカテゴリから必要か