Global Error

See example: Global Error

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>CLUI</title>
    <link rel="shortcut icon" href="static/favicon.png"/>

    <!-- CSS to be documented -->
    <link rel="stylesheet" href="css/corelogic-ui.css">

    <!-- Main libraries -->
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/corelogic-ui.min.js"></script>

</head>
<body>
<div class="alert alert-error" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <i class="fa fa-first-order"></i>
    <strong>Keyboard Error!</strong> Please push any key to continue.
</div>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-logo"></div>
            <div class="application-name">
                <h1>CoreLogic UI</h1>
            </div>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/components_-_alert.html?page=alert">Back To CLUI</a></li>
        </ul>
    </div>
</nav>

<div class="container-fluid container-full container-background vertical-parent">
    <div class="vertical-center">
        <div class="row">
            <div class="col-xs-8 col-xs-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">Search for a Property</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group form-group-lg">
                                <div class="input-group">
                                    <i class="fa fa-search left-icon"></i>
                                    <label class="sr-only" for="middleSearch">Search for an address...</label>
                                    <input class="form-control" id="middleSearch" placeholder="Enter an address"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-default btn-lg">GO!</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  window.clui.autoCompleteInit('#middleSearch', {
    minLength: 2,
    source: function (request, response) {
      var settings = {
        async: true,
        url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
        crossDomain: true,
        data: {
          input: request.term
        },
        method: "GET"
      };

      $.ajax(settings).done(function (data) {
        response($.map(data.result_set, function (item) {
          return {
            label: item.address,
            value: item.address
          };
        }));
      });
    }
  });
</script>
</body>
</html>