title: How to structure and return key value pair from a JSON call with Autocomplete
body: <p>I am currently using Autocomplete with dynamic inputs, currently my Autocomplete works fine.</p>
  
  <p>I basically need to return 2 values back from <code>JSON</code>. One is the <code>ID</code> of the song and the other is the <code>title</code> of that song. The <code>ID</code> is the primary key of that table so it will always be different.</p>
  
  <p>I figure I can do this with a key/value where the <code>key</code> is the <code>ID</code> and the <code>value</code> is the <code>title</code>.</p>
  
  <p>When the user clicks on the input field right now it returns both the <code>ID</code> and <code>title</code> of the song in the field. What I need to be able to do is just put the <code>title</code> in the field and be able to send off the <code>ID</code> to my <code>jquery/AJAX</code> then to my php script.</p>
  
  <p>This is what is being returned so far. I just want the title in the input field but need the ID to send off to php.</p>
  
  <p><img src="https://i.stack.imgur.com/GZBpt.jpg" alt="autocomplete example"></p>
  
  <p>I am not even sure if I am structuring my JSON call back correctly to be able to do this.</p>
  
  <p>This is what I have so far in order</p>
  
  <p><strong>JQUERY AUTOCOMPLETE</strong></p>
  
  <pre><code>$(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){
      var sInputGroupHtml = $(this).parent().html();
      var sInputGroupClasses = $(this).parent().attr('class');
      $(this).parent().parent().append('&lt;div class="'+sInputGroupClasses+'"&gt;'+sInputGroupHtml+'&lt;/div&gt;');
      $('.searchsong').autocomplete({
          source:'../includes/searchaddsong.php',
          minLength:0,
          select: function(event,ui){ &lt;--THIS IS THE SECTION I THINK I NEED TO RETURN THE ID AND TITLE BUT I DONT KNOW HOW TO PLACE JUST THE TITLE INTO THE INPUT FIELD AND NOT THE ID AS WELL
          }
      });
  });
  $(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){
      $(this).parent().remove();
  });
  </code></pre>
  
  <p><strong>searchaddsong.php</strong></p>
  
  <p>UPDATE: Edited this <code>searchaddsong.php</code> I think I figured this out</p>
  
  <pre><code>&lt;?php
  include('connect.php');
  $key="a";
  $array = array();
  $sql = "SELECT * FROM wafilepaths WHERE title LIKE '%{$key}%'";
  $result = mysql_query($sql);
  while ($row = mysql_fetch_array($result)) {
      $array[] = array(
          $row['ID'] =&gt; $row['title']
      );
  }
  echo json_encode($array);
  ?&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input class="form-control searchsong" name="searchsong[]" id="searchsong" type="text" placeholder="Type Something" /&gt;
  </code></pre>
  
  <p><strong>AJAX</strong></p>
  
  <pre><code>$(".loginFormAddSetlist").submit(function () {
  var church_code = $('.church_code').val();
  var dayofweek = $('.dayofweek').val();
  var datepicker = $('.datepicker').val();
  var searchsong = $('.searchsong').val();
      $.ajax({
          type: "POST",
          url: "../includes/uploadsetlist.php?",
          data:({church_code: church_code, dayofweek: dayofweek, datepicker: datepicker, searchsong: searchsong}),
          success: function(data) {
              $('div.alert4').fadeIn();
              $('div.alert4').html(data);
              $('div.alert4').delay(5000).fadeOut();
          }
      });
  return false;
  });
  </code></pre>
  
  <p><strong>uploadsetlist.php</strong></p>
  
  <pre><code>&lt;?
      $ID = $_GET['ID'];
  ?&gt;
  </code></pre>