JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

    <header class="container-fluid">
        
        
    </header>

    <div class="container-fluid" ng-app="ceApp" >
      <div class="search-container" ng-controller="searchController">
        <div class="search-div" ng-form="searchForm">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-8 col-xs-8 searchbox_div">
                <input type="search" ng-required="true" name="searchbox" id="peoplesearch" placeholder="search by name" ng-model="searchvalue" class="search_input" />
                <div class="ng-hide" ng-show="searchForm.searchbox.$error.required  && (searchForm.$submitted || searchForm.searchbox.$touched)">                          
                  <p class="alert">Name is required.</p>
                </div>
              </div>
              <div class="col-md-4 col-xs-4">
                <button type="button" value="Search" ng-click="SearchPeople()">Search</button>
              </div>
            </div>
          </div>
        </div>
        <div class="search-results">
          <div class="container">
            <div class="row">
                <div ng-repeat="person in SearchResults" class="col-md-3">
                  <div class="result" ng-class="{'person-male': person.gender === 'M', 'person-female': person.gender === 'F'}">
                    <div class="result_heading"><h3>{{person.name}}</h3></div>
                    <div class="result_attributes">
                      <span>{{person.email}}</span>
                      <span>{{person.city}}</span>
                    </div>
                  </div>                    
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="container-fluid">
         
    </footer>

CSS

.search-container {
        border: 1px solid #000;
        margin-left: auto;
        margin-right: auto;
      }
      .result {
        padding: 15px;
        margin: 5px;
        border: 1px solid #000;
        min-height: 150px;
        max-height: 150px;
      }
      .search_input {
        width: 80%;
        padding: 5px;
      }
      input[type="search"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: searchfield;
      }
      
      input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
      }

      .searchbox_div {
        text-align: center;
      }
      .search-div {
        border-bottom: 1px solid #000;
      }
      .alert {
        color: red;
      }
      .person-male {
        border-color: red;
      }
      .person-female {
        border-color: blue;
      }
      @media (min-width: 75rem){
        .search-container {
          margin-top: 10rem;
          max-width: 123.125rem;
        }
        .search-div, .search-results {
          padding: 10px;
        }                
      }
      @media (max-width: 75rem) {
        .search-container {
          margin-top: 2.5rem;
        }
        .search-div, .search-results {
          padding: 12px;
        }
        .search-div {
          margin-top: 5px;
        }
      }

JavaScript

var ceApp = angular.module('ceApp', ['ceControllers']);
      var ceControllers = angular.module('ceControllers', []);

      ceControllers.controller('searchController', ['$scope', function($scope) {
          $scope.People = null;
          $scope.searchvalue = '';
          $scope.SearchResults = null;
          function loadPeople() {
            var xmlhttpRequest = new XMLHttpRequest();
            xmlhttpRequest.overrideMimeType("application/json");            
            xmlhttpRequest.onreadystatechange = function () {
              if (xmlhttpRequest.readyState == 4 && xmlhttpRequest.status == "200") {
                $scope.People = JSON.parse(xmlhttpRequest.responseText);                
              }
            };
            xmlhttpRequest.open('GET', 'MOCK_DATA.json', false);
            xmlhttpRequest.send(null);
          }

        $scope.SearchPeople = function() {
          var searchForm = $scope['searchForm'];
          if (issubmittedformValid($scope, searchForm)) {
              var results = [];
              loadPeople();              
              for (var personIndex=0 ; personIndex < $scope.People.length ; personIndex++)
              {
                  if ($scope.People[personIndex]['name'].toLowerCase().indexOf($scope.searchvalue.toLowerCase()) !== -1) {
                      results.push($scope.People[personIndex]);
                  }
              }
              $scope.SearchResults = results;
          }            
        };

        issubmittedformValid = function ($scope, submittedForm) {
            var eachElement = null;
            $scope.$broadcast('$validate');
            if (!submittedForm.$invalid) {
                return true;
            } else {
                submittedForm.$submitted = true;
                for (eachElement in submittedForm) {
                    if (submittedForm[eachElement] && submittedForm[eachElement].hasOwnProperty && submittedForm[eachElement].hasOwnProperty('$dirty')) {
        ...