json value get in input box

I am confused in the sample I posted in the referred question is already adding the value to an input that can then be sent back.

Consider this sample
HTML

  <form action="reflect.php" method="post">
    <div class="form-group">
      <input type="text" id="skills" name="skills" class="col-md-12" value="" readonly style="width:100%; background-color:#ccc;padding:1px 3px; margin-left:3px; cursor:pointer; float:right; margin-left:5px;">
      <span style="float:right; margin-top:-25px; font-weight:bold;font-size:15px; cursor:pointer; position: relative;" id="clear_skills" title="Clear Skills">&nbsp;X&nbsp;</span>
      <br/><br/>
      <div class="skills-container"></div>
      <input type="text" name="typeahead" value="" class="typeahead tt-query form-control col-md-12" autocomplete="off" placeholder="Add More Skills" style="width:200px;"/>
    </div>  
    <div class="alert alert-danger" id="error" style="display: none">You have already selected this skill.</div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Select all Open in new window

<script>
var counter = 0;
$(function() {
  $('input.typeahead').typeahead([{  
      name: 'typeahead',
      valueKey: 'skill',
      remote: {
        url: 't1638.php?key=%QUERY',
        filter: function (parsedResponse) {
          $('#error').hide();
            
            return parsedResponse;
        }
      },                                            
  }]);

  $(".typeahead").focusin(function(){
    if(this.value!='') {
      var skills = $("#skills").val();
      var ifSkillAlreadyExist = skills.indexOf(this.value);   // ifSkillAlreadyExist ending till , comma
      //console.log((checkString.match(/,/g) || []).length);       // Check Occurance count of , (comma)
      if(ifSkillAlreadyExist == '-1') {
        $('.skills-container').append(
        $('<div/>', {
          class: 'skill-item',
          html: this.value
          }).append(
            $('<a/>', {
              class: 'skill-remove glyphicon glyphicon-remove'
            })
          )
        );
        
        if (skills.length > 0) skills += ', ';
        $("#skills").val(skills + this.value);
      } 
      else { 
        // Don't do this - rather add an error to the page
        //alert('You have already selected this skill.');
        $('#error').show();
      }
    }
    this.value = "";
  }); 
  
  $('body').on('click', '.skill-remove', function() {
    var val = $(this).parent().text();
    $(this).parent().remove();
    var inp = $('#skills').val().split(',');
    var res = [];

    while(inp.length > 0) {
      var top = inp.pop().trim();
      if (top != val) {
        res.push(top);
      }
    }

    $('#skills').val(res.join(', '));
  });
});
</script>

Select all Open in new window

Working sample here