I want build a custom Google search.
I tried this one
My Code
<div>
<form id="cse-search-box" action="http://google.com/cse" target='if2'>
<input type="hidden" name="cx" value="009827885688477640989:igzwimalyta" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="button" name="sa" value="Search" onclick="doit()" />
</form>
</div>
<div>
<iframe name="if2" id="if2" width="100%" height="600px" marginheight="0" frameborder="0">
</iframe>
</div>
its working. Then I try to remove the height scroll bar when more data is coming from Google. but it is saying error like Unsafe JavaScript attempt to access frame with URL google.com/… from frame with URL 192.168.9.185/KLMS/CustomGoogleSearch.aspx. Domains, protocols and ports must match
so is there any method to fetch the data from Google without using Iframe (like ajax call) [EDIT]
I tried
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Search.css" />
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/CustomSearch.js"></script>
</head>
<body>
<div>
<form id="cse-search-box" action="http://google.com/cse" target='if2'>
<input type="hidden" name="cx" value="009827885688477640989:igzwimalyta" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="button" name="sa" value="Search" onclick="doit()" />
</form>
</div>
<div>
<form id="frmSearch" runat="server" autocomplete="off">
<div id="mainSearchContainer">
<!-- Container to show Internal search result -->
<div class="searchResult">
<!-- Show Item search result (Currently Tip) -->
<div class="itemResult">
<fieldset>
<legend>Items</legend>
<div class="resultContainer">
</div>
</fieldset>
</div>
<!-- Show People search result (currently PointCat members) -->
<div class="peopleResult">
<fieldset>
<legend>People</legend>
<div class="resultContainer">
</div>
</fieldset>
</div>
</div>
</div>
</form>
</div>
<div>
<iframe name="if2" id="if2" width="100%" height="600px" marginheight="0" frameborder="0"></iframe>
</div>
<script type="text/javascript">
// get AJAX http request
var xmlhttp = getXMLHttpRequest();
function getXMLHttpRequest() {
var xhr;
if (window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {
//code for IE6, IE5
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
window.doit = function () {
xmlhttp.onreadystatechange = function () {
document.forms["cse-search-box"].submit();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//This is used when AJAX returns
//xmlhttp.responseText contains all markup sent back from google
//Determine size of iframe
$("#if2").attr('width', '100%');
$("#if2").attr('height', textHeight(xmlhttp.responseText) + "px");
//Used to set the contents of the iframe
//May have to be adapted to get the response to a specific place in the iframe tag hierarchy
$("#if2").attr('src', "data:text/html;charset=UTF-8," + escape(xmlhttp.responseText));
}
};
xmlhttp.open("POST", "http://google.com/cse", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("cx=009827885688477640989:igzwimalyta&ie=UTF-8&q=31");
};
//Measures the size of the returned text
function textHeight(text) {
$("body").append('<span id="tempSpan" style="display:block;">' + text + '</span>');
var height = $("#tempSpan").height();
$("#tempSpan").remove();
return height;
};
</script>
</body>
</html>
[/edit]
Please help.
thanks in advance
