搜索框,选择自定义搜索选项

时间:2013-12-04 15:16:54

标签: html css google-custom-search search-box

如何在一个字段中创建带有谷歌自定义搜索引擎选项的搜索框。 我有代码,但我不知道如何在不同类型的自定义搜索引擎之间进行组合以选择下拉列表中的选项:

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /></head><body style="background-color:transparent; margin:3px; padding:0px;">
<form action="https://www.google.com/cse" id="cse1" target="_top" onsubmit='this["q"].value = this["sitesearch"].value + document.getElementById("searchQuery").value'>
<input type="hidden" name="q" value="" />
<input id="searchQuery" type="text" style="width:440px;" maxlength="255" value="" />
<input type="hidden" name="sitesearch" value="" /><input type="hidden" name="cx" value="00000000000000000000000:aaaaaaaaaaa" />
<span id="search-page-border">
<label class="accessibly-hidden"></label>
<label for="search-which" class="accessibly-hidden"></label><select name="" id="" style="width: auto"><option value="cse1">Google Custom Search 1</option><option value="cse2">Google Custom Search 2</option></select> </span>
<input type="submit" name="" id="" value="search" />
</form>

非常感谢

1 个答案:

答案 0 :(得分:0)

我在这里有一个这样的解决方案示例:http://edu.schema-labs.appspot.com/。您可以从下拉列表中选择引擎(“整个网络”,“策展索引”),并将cx附加到网址。然后我从urlparam中获取cx并以编程方式呈现引擎:

var init = function(cx) {
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
};

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(window.location.search)||[,null])[1]
    );
}

var cx = getURLParameter('cx') == 'null' ? cx : getURLParameter('cx');
init(cx)