title: How to supply parameters to autocomplete function?
body: <p>Below is my autocomplete function that's build on top of jQuery.ui. It works perfectly fine. All I want to do is with this line: <code>var targetItem = $("#subject");</code>. Currently as you can see, assign <code>$("#subject")</code> to the <code>'targetItem'</code> variable in the autocomplete function.</p>
  
  <p>But I want value assign to <code>'targetItem'</code> variable based on the 'keyup' event of textbox.In short, I tried something like this:</p>
  
  <pre><code>var target;
     var targetItem2;
      $("input[type=text]").on("keyup",function()
          {
              target = this.id;
              alert(target);
             targetItem2 = $("#"+target);
          });
  </code></pre>
  
  <p>I placed it above the autocomplete function and then assign 'targetItem2' to the 'targetItem' variable but it doesn't get the value passed.</p>
  
  <p>Is there a way to do something with this function so that value can be assign based on keyup event or better anyway I can pass parameters to the autocomplete function instead?</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="ui-widget"&gt;
                   &lt;input id="subject" type="text" name="subject" value="" placeholder="Subject" class="1"/&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$.widget('custom.mcautocomplete', $.ui.autocomplete, {
      _renderItem: function(ul, item) {
          var t = '',
              result = '';
  
          $.each(this.options.columns, function(index, column) {
  
              t += '&lt;span style="float:left;min-width:' + column.minWidth + ';"&gt;' + item[column.valueField ? column.valueField : index] + '&lt;/span&gt;'
          });
  
          result = $('&lt;li&gt;&lt;/li&gt;')
              .data('ui-autocomplete-item', item)
              .append('&lt;a class="mcacAnchor"&gt;' + t + '&lt;div style="clear: both;"&gt;&lt;/div&gt;&lt;/a&gt;')
              .appendTo(ul);
          return result;
      }
  });
   //ajax starts
      var targetItem = $("#subject");//want to assign value form supplied parameter
      $("document").ready(function(){       
      var data = {
        "action": "test"
      };
      data = $(this).serialize() + "&amp;" + $.param(data);
      $.ajax({
      type: "GET",
      dataType: "json",
      url: "store2.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) {
        //$("#showPlace").html("&lt;br /&gt;JSON: " + data );
       // alert("Form submitted successfully.\nReturned json: " + data["json"]);
      // alert(data);
        // console.log(data);
          var columns = [{
          name: 'level',
          minWidth: '200px'},
          {
          name: 'subject',
          minWidth: '70px'},
          {
          name: 'catid',
          minWidth: '70px'}
          ],
  
          colors = data;
          var selectThis=targetItem.attr("class");//textbox class determines which item in array to select
          var valueV=targetItem.attr("value");
          targetItem.mcautocomplete({
          showHeader: true,
          columns: columns,
          source: colors,
          select: function(event, ui) {
              // Set the input box's value
              this.value = (ui.item ? ui.item[selectThis] : '');
  
              //search for nearest value
  
              // Set the output div's value
              $('#show_subject') &amp;&amp; $('#show_subject').text(ui.item ? ('Subject = ' + ui.item[selectThis]) : 'Select a subject');
              return false;
           }
         });
              }
            });
  
        });
  </code></pre>