HIW JS API Example #5

Performing an OR keyword search.

by HealthIndicators

HTML

<script src="https://rawgit.com/HealthIndicators/js-api/current-release/Content/Scripts/API/Output/hiw-api.min.js"></script>
<div>
    <label for="apiKey">API Key:</label>
    <input id="apiKey" type="text" />
</div>
<div>
    <label for="baseURL">Base URL:</label>
    <input id="baseURL" type="text" />
</div>
<div>
    <label for="keywords">Keywords:</label>
    <input id="keywords" type="text" />
    <button id="runButton">Run Example</button>
</div>

<p>This example shows how to perform an OR search to find matching indicator descriptions.</p>

<ul id="results"></ul>

<div id="loading">Loading, please wait...</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

label {
    display: inline-block;
    width: 200px;
    text-align: right;
}

#map {
    width: 100%;
    height: 500px;
}

#loading {
    display: none;
    position: absolute;
    top: 40%;
    left: 25%;
    width: 50%;
    margin: 40px;
    padding: 10px;
    border: 1px solid #666;
    background: linear-gradient(270deg, #1fbb16, #ffffff, #1fbb16);
    background-size: 600% 600%;
    text-align: center;
    animation: loading 3s ease infinite;
}

@keyframes loading { 
    0% {
        background-position: 100% 50%;
    }
    
    100% {
        background-position: 0% 50%;
    }
}

JavaScript

var apiKey_Key = "apiKey";
var baseURL_Key = "baseURL";
var indicatorDescriptionID_Key = "indicatorDescriptionID";
var api = null;
var map = null;

function run() {
    var apiKey = $("#apiKey").val();
    var baseURL = $("#baseURL").val();
    
    $("#runButton").attr("disabled", "disabled");
    $("#loading").show("fast");
    
    //Create an API instance against which to make your API calls, passing in your API key.
    api = new hiw.API(apiKey, baseURL);

    runExample();
}

function runExample() {
    var keywords = $("#keywords").val().split(" ");
    
    if (keywords) {
		var indicatorDescriptions = {};
		
		for (var i = 0; i < keywords.length; i++) {
			var keyword = keywords[i];
			var isLast = (i == (keywords.length - 1));
			
			hiw.IndicatorDescription.search(keyword, api, function (result) {
				if (result) {
					result.forEach(function (r) {
						if (!indicatorDescriptions[r.id])
							indicatorDescriptions[r.id] = r;
					});
				}
				
				if (isLast) {
					var $results = $("#results");

					$results.empty();
					$results.append($.map(indicatorDescriptions, function (o) {
						return $("<li>").text(o.id + ": " + o.shortDescription);
					}));
				
					runComplete();
				}
			});
        }
    }
}

function runComplete() {
    $("#runButton").removeAttr("disabled");
    $("#loading").hide("fast");
}

function getParameters() {
    var apiKey = null;
    var baseURL = null;
    
    if (typeof (Storage) !== "undefined") {
        apiKey = localStorage.getItem(apiKey_Key);
        baseURL = localStorage.getItem(baseURL_Key);
    }
    
    $("#apiKey").val(apiKey);
    $("#baseURL").val(baseURL || hiw.API.DefaultBaseURL);
}

function setParameter(key, value) {
    if (typeof (Storage) !== "undefined")
        localStorage.setItem(key, value);
}

$(function () {
    getParameters();
    
    $("#apiKey").change(function () { setParameter(apiKey_Key, $(this).val()); });
    $("#baseURL").change(function () { setParameter(baseURL_Key,...