Untitled

// Retrieve JSON information

   $('#search').keyup(function() {
     var searchField = $('#search').val();
     var regex = new RegExp(searchField, "i");
     var output = '<div class="row">';

     $.getJSON('coretype.json', function(data) {
       $.each(data, function(key, val) {
         if (val.identifier.search(regex) !== -1) {
           console.log(val);
           var thisVal = JSON.stringify(val);
           output += "<h5 class='sclear' onclick='addToList(" + thisVal + ")'>" + val.identifier + "</h5>"
         }
       });
       output += '</div>';
       $('#searchResult').html(output);
       $('#search').focus(
         function() {
           $(this).val('');
         });
     });
   });


   // this is the click of the keyword
   $('#result').on('click', 'li', function() {
     var click_text = $(this).text();
     console.log(click_text);
     var thisObj = []; // affects overall function
     // thisObj = findObject(click_text);
     console.log(thisObj);
     $(this).css('display', 'none');
     $(this).empty();

   });
   // prog bar
   $('input').on('click', function() {
     var valeur = 0;
     $('input:checked').each(function() {
       if ($(this).attr('value') > valeur) {
         valeur = $(this).attr('value');
       }
     });
     $('.progress-bar').css('width', valeur + '%').attr('aria-valuenow', valeur);
   });

 });

 var searchObjs = [];

 // this function below is the actual display of the multiselect

 function addToList(obj) {
   //console.log(obj);
   searchObjs.push(item2);

   $('#searchResult').html('');
   $('#result').append('<li class="list-group-item link-class">' + obj.identifier) + '</li>';
   var item2 = {}; // this  creates items that we can then use to populate progress
   item2["identifier"] = obj.identifier;
   item2["progressbar1"] = obj.progressbar1;
   item2["progressbar2"] = obj.progressbar2;
   item2["progressbar3"] = obj.progressbar3;
   item2 = $.parseJSON(item2);
   document.getElementById("progdata").innerHTML = obj.progressbar1;
 }


 function findObject(identifier) {
   var found = 0;
   for (var i = 0, len = searchObjs.length; i < len; i++) {
     if (searchObjs[i].identifier === identifier) {
       return searchObjs[i]; // Return as soon as the object is found
       found = 1;
     }
   }
   if (found === 0) {
     return null; // The object was not found
   }
 }

<body id="bootstrap-overrides">


    <!-- Header and Search Bar -->
       <div class="container" style="width:900px; margin-bottom: 5em">
        <h2 align="center">EnneaTest</h2>
        <br />
        <br />

        <div align="center">
            <input type="text" name="search" id="search" placeholder="trait type" class="form-control" />
        </div>
        <div id="searchResult"></div>
        <div id="rlist">
            <ul>
                <li class="list" id="result"></li>
                <li class="list" id="progdata"></li>
            </ul>
        </div>
    </div>


    <!-- Progress Bars Start -->
    <div class="container" style="width:900px;">
    <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
    <div class="row tasks">


        <div class="col-md-2">
            <input type="checkbox" name="progress" class="progress" value="10">
        </div>
        <div class="col-md-2">
            <input type="checkbox" name="done" class="done" value="20">
        </div>
    </div>
    </div>
</body>

[
  {
    "identifier":"Happy",
    "progressbar1": 100,
    "progressbar2": 60,
    "progressbar3": -40
  },
    {
    "identifier":"Fat",
    "progressbar1": -30,
    "progressbar2": -20,
    "progressbar3": 30
  }
]