Include a Search Functionality within the Dropdown List of Select Options

Instead of using the select element, the DATALIST HTML element can be utilized to find customers. An example of this solution can be found at http://edu.schema-labs.appspot.com/. The engine can be selected from the dropdown options, which include “whole web” and “curated index”, and its cx will be added to the URL.


Solution:

An instance of a viable solution can be found at http://edu.schema-labs.appspot.com/. The engine can be selected from the dropdown menu, which offers the options of “whole web” or “curated index”. The cx is then added to the URL. Subsequently, the cx is obtained from the URL parameter and the engine is rendered programmatically.

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)

Frequently Asked Questions

Posted in Css