html 即时Google自定义搜索引擎
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 即时Google自定义搜索引擎相关的知识，希望对你有一定的参考价值。
@charset "utf-8";
/* CSS Document */
/* Main Styles */
header {
padding: 4px 4px 4px 10px;
border-bottom:1px solid #AAAAAA;
background: #F3F3F3;
}
header h1, nav {
display: inline;
}
header h1 {
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size: 36px;
}
header aside {
float: right;
}
a {
color: #3B5998; /* Facebook Blue */
text-decoration: none;
}
a:hover {
border-bottom: 1px solid #3B5998;
}
nav {
position: fixed;
}
nav a {
margin-left: 10px;
font-size: 13px;
}
#about {
font-family: "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica,sans-serif;
padding: 5px;
font-size: 14px;
}
section iframe {
height: 100%;
width: 100%;
border: 0;
position: fixed;
top: 45px;
}
section #container {
width: 95%;
margin: 10px auto;
padding: 20px 0 20px 0;
background: #f6f6ef;
}
section p {
margin: 3px 10px 18px 10px;
}
/* Pretty much stolen from Digg V4, at least that site is good for something... */
footer {
background: #F3F3F3;
border-top:1px solid #AAAAAA;
bottom:0;
color:#333333;
font-size:0.833333em;
padding:5px 0;
position:fixed;
right:0;
text-align:center;
width:100%;
z-index:5;
}
/* Hacker News Page */
#hn {
font-family: Verdana;
font-weight: bold;
font-size: 70px;
text-align: center;
}
section #container {
padding: 10px;
}
section #container #bigtextbox {
width: 85%;
display: block;
margin: 30px auto;
height: 32px;
font-size: 24px;
border: 1px solid #aaa;
padding: 6px;
}
/* Twitter Page */
#tw {
text-indent: -999999px;
background: url(/images/twitter.png);
height: 167px;
width: 642px;
margin: auto;
}
/* About Page */
#contact a {
float: right;
font-size: 28px;
padding: 10px;
margin: 10px;
border: 1px solid #aaa;
background: #eee;
}
#contact a:hover {
background: #ccc;
}
blockquote {
background: #E9EDF5;
padding: 30px;
font-weight: normal;
font-size: 30px;
font-style: italic;
width: 75%;
margin: 20px;
}
dl {
margin: 10px 20px;
}
dt {
font-style: italic;
font-weight: bold;
}
dd {
margin-bottom: 10px;
}
<div id="container">
<input type="text" name="hn_search" id="bigtextbox">
<div id="results">
</div>
</div>/*
html5doctor.com Reset Stylesheet
v1.6
Last Updated: 2010-08-18
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted inherit;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Instant Google Custom Search Engine (CSE)</title>
<meta charset="utf-8">
<meta name="description" content="Google Custom Instant">
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="html5reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Instant Google Custom Search Engine (CSE)<span style="float:right; vertical-align:middle;font-family:arial,sans-serif;font-size:11px;" class="gBrandingText">powered by<img style="padding-left:1px;vertical-align:middle;" src="http://www.google.com/uds/css/small-logo.png"></span> </h1>
</header>
<div class="gsc-control-cse gs-no-results-result" style="padding-top:10px;padding-bottom:0px;width:94%;line-height:1.5em;text-align:center;">
<div class="gs-snippet">This is an example Instant version of a <a href="http://www.google.com/cse/">Google Custom Search Engine (CSE)</a>. You can instantise your own CSE by adding your CSE ID to this url e.g. <a href="http://mashe.hawksey.info/search/?cx=012010416210434366262:-vttp31xsd0">http://mashe.hawksey.info/search/?cx=012010416210434366262:-vttp31xsd0</a>. <br/>This is an example Instant CSE for <a href="http://mashe.hawksey.info/">JISC RSC MASHe</a>.</div>
</div>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var cb = function(){pageTracker._trackPageview(document.location.pathname + "?q=" + document.getElementsByClassName("input-gsc")[1].value);};
var customSearchControl = new google.search.CustomSearchControl('ENTER_YOUR_CSE_ID_HERE');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.setSearchCompleteCallback(this, cb);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<section id="note">
<div align="center"><a href="http://mashe.hawksey.info/2010/09/instant-cse/">Read how this was done here</a></div>
</section>
<footer>Created by <a href="http://twitter.com/mhawksey">mhawksey</a> using <a href="http://www.tamdenholm.com/">Tam Denholm's</a> - Idea <del>inspired</del> <ins>stolen</ins> from <a href="http://hartlabs.net/">Michael Hart</a> who <del>got inspired</del> <ins>stole from</ins> <a href="http://www.feross.org/">Feross Aboukhadijeh</a> who <del>got inspired</del> <ins>stole from</ins> Google.</footer>
<script type="text/javascript">
// JavaScript Document
// Modified from code by Tam Denholm at http://instantise.com/
// Tam said: I'd like to apologise in advance for this code, its going to be quite shit mainly because
// im a PHP dev and primarily stick to backend work, my JS isnt as good as my PHP.
var AJAX_API_key = 'ENTER_YOUR_AJAX_API_KEY_HERE';
var CSE_ID ='ENTER_YOUR_CSE_ID_HERE';
$(document).ready(function(){
// onload
chg_iframe();
});
function urldecode(str){
return decodeURIComponent(str.replace(/\+/g, '%20'));
}
function searchComplete(message) {
alert(message);
}
function chg_iframe(){
$.get('searchbox.html', function(data) {
$('input.gsc-input').keyup(function(event){
$('.gsc-cursor-box').remove();
$('.gsc-webResult.gsc-result').remove();
$('.gsc-resultsbox-invisible').removeClass('gsc-resultsbox-invisible').addClass('gsc-resultsbox-visible').attr('style', 'visibility: visible;');
if ($('.gsc-results.gsc-webResult').attr('style', 'display: none;')){
$('.gsc-results.gsc-webResult').attr('style', 'display: block;');
}
$.ajax({
type: "GET",
url: 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&key='+AJAX_API_key+'&cx='+CSE_ID+'&q= '+$('input.gsc-input').val(),
dataType: "jsonp",
success: function(data){
//$('#main').append(data.responseData.results);
$.each(data.responseData.results, function(i, result){
$('.gsc-results.gsc-webResult').append('<div class="gsc-webResult gsc-result"> <div class="gs-webResult gs-result"><div class="gs-title"><a class="gs-title" href="'+result.url+'" onclick="javascript: pageTracker._trackPageview(\'#!/'+result.url+'\');">'+result.title+'</a></div><div class="gs-snippet">'+result.content+'</div> <div class="gs-visibleUrl gs-visibleUrl-short">'+result.visibleUrl+'</div></div></div>');
});
}
});
});
});
}
</script>
</body>
</html>以上是关于html 即时Google自定义搜索引擎的主要内容，如果未能解决你的问题，请参考以下文章