0
私はオートコンプリートを使用して、複数のソースから提案を取得し、それらをUIの1つのリストとして表示します。私が入力しているときに、提案が表示されますが、提案にマウスを重ねると、 "TypeError：n is undefined"というエラーが表示されます。私が提案をクリックすると、 "ui.item is undefined"というエラーが出ます。JQuery-UIは "TypeError：n is undefined"と "ui.itemは未定義です"
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>jQuery Autocomplete with Multiple Search Engines Suggestions</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var self = this, currentCategory = "";
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
});
$(function(){ //page load
$("#q").focus(); //set focus to search field
$("#q").catcomplete({
source:"suggest.php",
minLength:2,
delay:10,
select: function(event, ui) {
window.location.assign(ui.item.searchUrl + ui.item.label);
//document.getElementById("q").value = ui.item.label
//$("#q").val(ui.item.value);
//$("#searchform").submit();
}
});
});
</script>
<style type="text/css">
.ui-autocomplete-category {
font-weight: bold;
font-size: 1em;
padding: .2em .2em;
margin: .4em 0 .2em;
line-height: 1.5;
color: #069;
border-bottom: 2px solid #069;
}
li.ui-autocomplete-category {
list-style-type: none;
}
</style>
</head>
<body>
<form id="searchform" name="form1" method="get" action="http://www.google.com/search">
Search:
<input name="q" id="q" type="text" size="40" />
<input name="submit" type="submit" value="Search" />
</form>
</body>
</html>
PHPスクリプト：
<?php
//Search term
$term = $_REQUEST['term'];
//Search Engine array
$searchEngines = array(
"Google" => array("http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&q=", "http://www.google.com/search?q="),
//"Bing" => array("http://api.bing.com/osjson.aspx?query=", "http://www.bing.com/search?q="),
//"Yahoo" => array("http://ff.search.yahoo.com/gossip?output=fxjson&command=", "http://search.yahoo.com/search?p="),
"Wikipedia" => array("http://en.wikipedia.org/w/api.php?action=opensearch&search=", "http://en.wikipedia.org/w/index.php?title=Special%3ASearch&search="),
//"Ebay" => array("http://anywhere.ebay.com/services/suggest/?q=", "http://shop.ebay.com/i.html?_nkw="),
"Amazon" => array("http://completion.amazon.com/search/complete?search-alias=aps&client=amazon-search-ui&mkt=1&q=", "http://www.amazon.com/s/field-keywords=")
);
//Combine Search Results
$searchArray = array();
foreach($searchEngines as $engine => $urls){
$url = $urls[0] . rawurlencode($term);
try{
//$json = file_get_contents($url);
$json = get_url_contents($url);
$array = json_decode($json);
$array = $array[1]; //$array[1] contains result list
if(count($array) > 0){
$array = getFormattedArray($array, $engine, $urls[1]);
$searchArray = array_merge($searchArray, $array);
}
} catch (Exception $e){ /* Skip the exception */ }
}
//Output JSON
header('content-type: application/json; charset=utf-8');
echo json_encode($searchArray); //Convert array to JSON object
//Format array to add category (search engine name)
function getFormattedArray($array, $engine, $searchUrl){
$newArray = array();
foreach($array as $a){
$newArray[] = array('label' => $a, 'searchUrl' => $searchUrl, 'category' => $engine);
}
return $newArray;
}
//Read URL contents
function get_url_contents($url)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
$ip=rand(0,255).'.'.rand(0,255).'.'.rand(0,255).'.'.rand(0,255);
curl_setopt($ch, CURLOPT_HTTPHEADER, array("REMOTE_ADDR: $ip", "HTTP_X_FORWARDED_FOR: $ip"));
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/".rand(3,5).".".rand(0,3)." (Windows NT ".rand(3,5).".".rand(0,2)."; rv:2.0.1) Gecko/20100101 Firefox/".rand(3,5).".0.1");
$html = curl_exec($ch);
curl_close($ch);
return $html;
}
?>
PHPの出力例やサンプルを提供できますか？ – Twisty