带有自定义搜索选择选项的搜索框答案

【问题标题】：Search box with select option of custom search带有自定义搜索选择选项的搜索框
【发布时间】：2013-12-21 03:48:26
【问题描述】：

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

<!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>

非常感谢

【问题讨论】：

我有一个包含论坛和博客的网站，我创建了两个自定义搜索引擎，一个用于博客，另一个用于论坛，我想创建带有两种不同类型的谷歌自定义选项的搜索框搜索一下，谢谢
是的，我希望我的访问者能够在下拉列表中选择搜索类型，谢谢
您可以复制我添加的代码并粘贴到本网站htmledit.squarefree.com
我推荐jsfiddle

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

【解决方案1】：

我在这里有一个这样的解决方案的例子：http://edu.schema-labs.appspot.com/。你可以从下拉列表中选择引擎（“整个网络”，“策划索引”），它的 cx 被附加到 url。然后我从 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)

【讨论】：