sdl-srch-bar
v1.0.3
Published
Basic Search Bar Element
Downloads
1
Readme
<sdl-srch-bar>
Basic Search Bar Element
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.
Viewing Your Element In Development Mode
$ cd sdl-srch-bar
$ polymer serveBuild the sdl-srch-bar demo & component
$ ./sdlMake Once you run this build there will be two build directories created: build-demo & build-component
Run the es6 version of the Demo
http://localhost/sdl-srch-bar/build-demo/es6-bundled/demo/index.htmlInclude sdl-srch-bar-loader.js to use as stand-alone component
See File: sdl-srch-bar/build-component/es6-bundled/demo/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>sdl-srch-bar demo</title>
<script type="module" src="../../sdl-srch-bar-loader.js"></script>
</head>
<body>
<sdl-srch-bar id='srch-bar1' ajaxUrl='data/srch-data.txt'>
<form>
<input name="input1" label="Filter Search">
</form>
</sdl-srch-bar>
<div id="message1"></div>
<br><br><br>
<script>
addEventListener('DOMContentLoaded', function(){
setTimeout(function(){
var srch1 = document.querySelector('#srch-bar1');
srch1.addEventListener("changed", function(e) {
var message = document.querySelector('#message1');
message.innerHTML = "<b><u>'changed' event fired:</u></b> ";
message.innerHTML += "<br>e.detail.formData = " + JSON.stringify(e.detail.formData);
message.innerHTML += "<br>e.detail.payload = " + JSON.stringify(e.detail.payload);
}, false);
}, 1000);
}, false);
</script>
</body>
</html>