Cacher is the code snippet organizer for pro developers

<link rel="stylesheet" href="//code.jquery.com/ui/1.7.1/themes/smoothness/jquery-ui.css">
<div id="child-sick-wrapper">
   <div class="search-wrapper">
      <div class="autocomplete">
         <input id="inputSearch" type="text" placeholder="Search Symptoms..." />
         <a href="#" id="clearAll" class="dont-show"></a>
      </div>
     
   </div>
   <div class="all-symptoms">
      {% for Item in List.Items %}
      <div class="single-symptom hidden" name="{{Item.FieldValues.SymptomName}} {% if Item.FieldValues.SymptomSynonyms %}({{Item.FieldValues.SymptomSynonyms}}){% endif %}">
            <h3 class="s-name">{{Item.FieldValues.SymptomName}}</h3>
            <div class="description-wrapper">
               <div class="s-description">{{Item.FieldValues.SymptomDescription}}</div>   
               <div class="links">
                  <a href="{{Item.FieldValues.SymptomLink}}#causes">CAUSES >></a>
                  <a href="{{Item.FieldValues.SymptomLink}}#treatment">TREATMENT >></a>
                  <a href="{{Item.FieldValues.SymptomLink}}#when-doctor">WHEN TO SEE A DOCTOR >></a>
               </div>
            </div>
        <div class="read-more">
           <a href="{{Item.FieldValues.SymptomLink}}">Read More ></a>
        </div>
      </div>
      {% endfor %}
   </div>
</div>

<script>
   var symptomsArray = [ {% for Item in List.Items %}"{{Item.FieldValues.SymptomName}} {% if Item.FieldValues.SymptomSynonyms %}({{Item.FieldValues.SymptomSynonyms}}){% endif %}", {%endfor%} ];
   jQ171(document).ready(function($) {
      var searchStyle = $("#search-style");
      $('#inputSearch').autocomplete({
         source: symptomsArray
      })
      $('#inputSearch').on('autocompleteselect', function(event, ui) {
         console.log(ui.item.label);
         var selectedOption = ui.item.label;
         $('.all-symptoms .single-symptom').addClass('hidden');
         $('.single-symptom').each(function() {
            if ($(this).attr('name') == selectedOption ) {
               $(this).removeClass('hidden');
            }
         })
      })
      jQ171('#inputSearch').on('keyup', function(e) {
         if ($('#inputSearch').val() == "") {
            $('.single-symptom').addClass('hidden');
            $('#clearAll').addClass('dont-show');
         } else {
            $('#clearAll').removeClass('dont-show');
         }
         
      })
      jQ171('#inputSearch').on('keydown', function(e) {
         if (e.which == 13) {
            return false;
         }
      })
      

      jQ171("#clearAll").on('click', function() {
         $(".single-symptom").addClass('hidden');
         $('#clearAll').addClass('dont-show');
         $('#inputSearch').val("");
         return false;
      })
   });
</script>