Search box with select option of custom search

Question

Search box with select option of custom search

2k views Asked by AudioBubble At 04 December 2013 at 15:16

How to create search box with select option of google custom search engine in one field. I have the code but I don't know how to combine between the different types of my custom search engines to select option in the dropdown:

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

Thank you very much

Original Q&A

There are 1 answers

**Devnook** · Answer 1 · 2013-12-04 21:35:58

I have an example of such solution here: http://edu.schema-labs.appspot.com/ .You can choose the engine from the dropdown ("whole web", "curated index") and it's cx gets appended to the url. Then I grab the cx from urlparam and render the engine programatically:

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)

TechQA.

Search box with select option of custom search

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in GOOGLE-CUSTOM-SEARCH

Related Questions in SEARCH-BOX

Popular Questions

Popular Tags

Trending Questions