title: How to set Jquery Autocomplete to a specific value and display It's Label using a datasource of JSON objects
body: <h1>Background</h1>
  
  <p>So I have a table that is populated by a form. Each row can be edited by hitting a edit button. The Edit button opens the form that is populated. I need to auto fill the autocomplete so that the user can see one of His selected course.</p>
  
  <h1>How I Cheated</h1>
  
  <p>I'm using PHP and Codeigniter server side and am dynamically creating my form based on database. The labels and values are all produced from the Database and populate my JQuery Auto complete (a.k.a datasource variable below). From my controller I'm passing my value to the model and getting the Label from the DB. From there I'm passing it to my view and to my AutoComplete and setting the input value equal to the found label. </p>
  
  <p>I feel dirty having done it this way. The inefficiency of this burns my eyes.</p>
  
  <h1>My Goal</h1>
  
  <p>I want to use the value that I've gotten and have the autocomplete select it and display it's label client side.</p>
  
  <p>OR</p>
  
  <p>I need to just display the label in the box so the user knows it's not a blank field.</p>
  
  <p>Both options need to allow the user to modify the autocomplete box.</p>
  
  <h1>Existing Code</h1>
  
  <p>My code for the input looks like this:</p>
  
  <pre><code>&lt;div class="row-start span-2"&gt;
          &lt;label for="course_code"&gt;Course Code &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="row-end span-2"&gt;
          &lt;input id="course_code"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My script for the autocomplete looks like this:</p>
  
  <pre><code>    &lt;script&gt;
      function search_course_code(){
        var datasource = [{"value":"1","label":"AAF100 - DL"},{"value":"2","label":"AAF101 - DL+web"},.....]; 
        var searchboxid = "#course_code";
        var searchresultid = "#CRSEINVID";
        $(searchboxid).autocomplete({
          source:datasource,
          focus: function( event, ui ) {
              $( searchboxid ).val( ui.item.label );
              return false;
              },
          select: function(event,ui){
              var UIvalue = ui.item.value;
              var UIlabel = ui.item.label;
              console.log(UIvalue);
              console.log(UIlabel);
              $( searchboxid ).val( ui.item.label );
              use_search("#search1","#CRSEINVID",UIvalue,UIlabel );        return false;
          }
        });
      }; 
      function use_search(show_select,result_id,uivalue,uilabel){
      //loads value to field that takes it's value
      $(result_id).val(uivalue);
      //Display course below search box
      course = "&lt;span&gt;"+uilabel+"&lt;/span&gt;";
      $(show_select).html(course );
  
      //stops the value from being shown in the search box
      return false;
    };
  
      $( document ).ready(function() {
           search_course_code();
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>I draw the value from a hidden input with a unique ID simply using JQUERY val() function.</p>
  
  <h1>What I've tried</h1>
  
  <h3>Try 1</h3>
  
  <p>Setting value using:
      $(searchboxid).val(hiddenInputValue);
  <strong>Result</strong>: Value displayed not the label</p>
  
  <h3>Try 2</h3>
  
  <p>Using the autocomplete on create method I tried to overwrite the UI object and send it to the select.</p>
  
  <pre><code>ui.item={"value":"","label":""};
  ui.item.value=$(hiddenInputValue).val;
  this.select(ui);
  </code></pre>
  
  <p><strong>Result</strong>: No observable change, no errors. </p>
  
  <h3>Try 3</h3>
  
  <p>$(searchboxid).autocomplete("select", hiddenInputValue);</p>
  
  <p><strong>Result</strong>:</p>
  
  <blockquote>
    <p>Uncaught Error: cannot call methods on autocomplete prior to
    initialization; attempted to call method 'select'</p>
  </blockquote>
  
  <h3>Try 4</h3>
  
  <p>Tried changing value using </p>
  
  <pre><code>$(searchboxid).val(hiddenInputValue);
  </code></pre>
  
  <p>and having change function detect it and set label with</p>
  
  <pre><code>$( searchboxid ).val( ui.item.label );
  </code></pre>
  
  <p><strong>Result</strong>: Value loaded into input not label</p>
  
  <h3>Try 5</h3>
  
  <p>Tried Triggering the change function with this:</p>
  
  <pre><code>$("#&lt;?php echo $id;?&gt;").autocomplete("option","change").call(searchBox);
  </code></pre>
  
  <p>and then setting label. Based on the answer to:</p>
  
  <p><a href="https://stackoverflow.com/a/6431592/3865913" title="jQuery AutoComplete Trigger Change Event">jQuery AutoComplete Trigger Change Event</a></p>
  
  <p><strong>Result</strong>: empty UI object for change function, </p>
  
  <h3>Try 6</h3>
  
  <p>Tried Triggering the select function with this:</p>
  
  <pre><code>$("#&lt;?php echo $id;?&gt;").autocomplete("option","select",{value:hiddenInputValue}).call(searchBox);
  </code></pre>
  
  <p>and then using my current select function. </p>
  
  <p><strong>Result</strong>: Uncaught Error: undefined is not a function, </p>
  
  <h1>Ideas</h1>
  
  <p><strong>Ideas 1</strong>:</p>
  
  <p>I thought of using the value then searching through the datasource object to find associating label and then using:</p>
  
  <pre><code>$(searchboxid).val(label);
  </code></pre>
  
  <p>would this work? How would I do it?</p>
  
  <p><s><strong>Idea 2</strong>:</p>
  
  <p>If the value of the input field is set to a value using:</p>
  
  <pre><code>$(searchboxid).val(label);
  </code></pre>
  
  <p>Would the change function detect it?</s> <strong>Not detected</strong> used console.log function in change function to give feedback,</p>