add initial code drop

src/angular-advanced-searchbox.css

@@ -0,0 +1,110 @@
+.advancedSearchBox {
+    display: block;
+    position: relative;
+    margin: 5px 0 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    min-height: 40px;
+    padding: 0 9px;
+    background-color: #fff;
+    cursor: text;
+    line-height: 38px;
+}
+
+    .advancedSearchBox.active {
+        border-color: #66afe9;
+    }
+
+    .advancedSearchBox .search-icon {
+        float: right;
+        padding: 10px 0 0 10px;
+    }
+
+    .advancedSearchBox .remove-all-icon {
+        float: right;
+        padding: 10px 0 0 10px;
+        cursor: pointer;
+    }
+
+    .advancedSearchBox .search-parameter {
+        display: inline-block;
+        height: 24px;
+        margin: 0 7px 0 0;
+        background-color: #5bc0de;
+        padding: 0 5px;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        line-height: 24px;
+        cursor: default;
+        transition: box-shadow 100ms linear;
+    }
+
+        .advancedSearchBox .search-parameter:hover {
+            box-shadow: 0 3px 3px rgba(0,0,0,0.2);
+        }
+
+        .advancedSearchBox .search-parameter div {
+            float: left;
+            margin: 0 2px;
+        }
+
+        .advancedSearchBox .search-parameter .remove {
+            color: #fff;
+            margin-left: 5px;
+            cursor: pointer;
+        }
+
+        .advancedSearchBox .search-parameter .key {
+            color: #fff;
+        }
+
+        .advancedSearchBox .search-parameter .value span {
+            color: #fff;
+        }
+
+        .advancedSearchBox .search-parameter .value input {
+            height: 24px;
+        }
+
+    .advancedSearchBox .search-parameter-input {
+        display: inline-block;
+        width: auto;
+        height: 24px;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+        .advancedSearchBox .search-parameter-input:focus {
+            box-shadow: none;
+            outline: none;
+        }
+
+
+
+    .advancedSearchBox .search-parameter-suggestions {
+        cursor: auto;
+        display: block;
+    }
+
+        .advancedSearchBox .search-parameter-suggestions .title {
+            display: block;
+            float: left;
+            height: 25px;
+            margin: 7px 7px 0 0;
+            background-color: transparent;
+            color: #888;
+            font-weight: bold;
+            padding: 0 5px;
+            font-size: 14px;
+            line-height: 25px;
+        }
+
+        .advancedSearchBox .search-parameter-suggestions .search-parameter {
+            cursor: pointer;
+            background-color: #bdbdbd;
+            color: #fff;
+        }

src/angular-advanced-searchbox.html

@@ -0,0 +1,41 @@
+<div class="advancedSearchBox" ng-class="{active:focus}" ng-init="focus = false" ng-click="setSearchFocus2 = true">
+    <span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon glyphicon glyphicon-search"></span>
+    <a ng-href="" ng-show="searchParams.length > 0 || searchQuery.length > 0" ng-click="removeAll()" role="button">
+        <span class="remove-all-icon glyphicon glyphicon-trash"></span>
+    </a>
+    <div>
+        <div class="search-parameter" ng-repeat="searchParam in searchParams">
+            <a ng-href="" ng-click="removeSearchParam($index)" role="button">
+                <span class="remove glyphicon glyphicon-trash"></span>
+            </a>
+            <div class="key">{{searchParam.name}}:</div>
+            <div class="value">
+                <span ng-show="!searchParam.editMode" ng-click="enterEditMode($index)">{{searchParam.value}}</span>
+                <input name="value"
+                       type="text"
+                       nit-auto-size-input
+                       nit-set-focus="searchParam.editMode"
+                       ng-keydown="keydown($event, $index)"
+                       ng-blur="leaveEditMode($index)"
+                       ng-show="searchParam.editMode"
+                       ng-model="searchParam.value"
+                       placeholder="{{searchParam.placeholder}}" />
+            </div>
+        </div>
+        <input name="searchbox"
+               class="search-parameter-input"
+               type="text"
+               nit-set-focus="setSearchFocus"
+               ng-keydown="keydown($event)"
+               placeholder="{{placeholder}}"
+               ng-focus="focus = true"
+               ng-blur="focus = false"
+               typeahead-on-select="typeaheadOnSelect($item, $model, $label)"
+               typeahead="parameter as parameter.name for parameter in parameters | filter:{name:$viewValue} | limitTo:8"
+               ng-model="searchQuery" />
+    </div>
+    <div class="search-parameter-suggestions" ng-show="parameters && focus">
+        <span class="title">Parameter Suggestions:</span>
+        <span class="search-parameter" ng-repeat="param in parameters | limitTo:8" ng-mousedown="addSearchParam(param)">{{param.name}}</span>
+    </div>
+</div>