title: Using JQuery UI Autocomplete in Cakephp 2.0
body: <p>I'm having trouble implementing JQuery UI Autocomplete in CakePHP 2.0. Want to display a list of Items on a Grocery list view to allow users to select an item already in the database instead of creating a new one.</p>
  
  <p><strong>Application Jquery</strong>:</p>
  
  <pre><code>////file:app/webroot/js/application.js
  $(document).ready(function(){
  // Caching the Item textbox:
  var item = $('#item');
  
  // Defining a placeholder text:
  item.defaultText('Search for items');
  
  // Using jQuery UI's autocomplete widget:
  item.autocomplete({
      minLength: 1,
      source: 'http://localhost/groceries/groclists/search'
      ////**part of the problem was here, needs to be full source**
  });
  
  });
  
  // A custom jQuery method for placeholder text:
  
  $.fn.defaultText = function(value){
  
  var element = this.eq(0);
  element.data('defaultText',value);
  
  element.focus(function(){
      if(element.val() == value){
          element.val('').removeClass('defaultText');
      }
  }).blur(function(){
      if(element.val() == '' || element.val() == value){
          element.addClass('defaultText').val(value);
      }
  });
  
  return element.blur();
  }
  </code></pre>
  
  <p><strong>Item form in View:</strong></p>
  
  <pre><code>    &lt;div class="items form"&gt;
      &lt;?php echo $this-&gt;Form-&gt;create('Item', array('action' =&gt; 'search')); ?&gt;
          &lt;?php echo $this-&gt;Form-&gt;input('item', array('type' =&gt; 'text', 'id' =&gt; 'item', 'label' =&gt; 'Search')); ?&gt;
      &lt;?php echo $this-&gt;Form-&gt;end(__('Submit', true)); ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Items Controller Search():</strong></p>
  
  <pre><code>public function search() {
              if ($this-&gt;RequestHandler-&gt;isAjax()) {
                  Configure::write('debug', 0);
                  $this-&gt;autoRender = false;
                  $query = $_GET['term'];
                  $searchitems = $this-&gt;Item-&gt;find('all', array(
                      'conditions' =&gt; array('Item.name LIKE' =&gt; '%' . $query . '%')));
                  $i = 0;
                  foreach ($searchitems as $searchitem) {
                      $response[$i]['value'] = $searchitem['Item']['name'];
                      $response[$i]['label'] = $searchitem['Item']['id'];
                      $i++;
                  }
                  echo json_encode($response);
              } else {
                  if (!empty($this-&gt;data)) {
                      $this-&gt;set('items', $this-&gt;paginate(array('Item.name LIKE' =&gt; '%' . $this-&gt;data['Item']['name'] . '%')));
                  }
              }
          }
  </code></pre>
  
  <p>I'm at a loss, any input welcome.</p>
  
  <hr>
  
  <p>After making the above change to the Application.js I'm now getting a response into my webpage. It has the correct number of results based off of what is included in the database at the moment, however it's a null response. From Firebug the response is as follows:</p>
  
  <pre><code>[{"value":null,"label":null},{"value":null,"label":null},{"value":null,"label":null},{"value":null,"label":null}]
  </code></pre>
  
  <p>Here are my Response Headers:</p>
  
  <pre><code>Response Headers
  Date    Sun, 18 Sep 2011 14:48:37 GMT
  Server  Apache/2.2.11 (Win32) PHP/5.3.0
  X-Powered-By    PHP/5.3.0
  Content-Length  113
  Keep-Alive  timeout=5, max=100
  Connection  Keep-Alive
  Content-Type    text/html; charset=UTF-8
  Request Headers
  Host    localhost
  User-Agent  Mozilla/5.0 (Windows NT 6.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
  Accept  application/json, text/javascript, */*; q=0.01
  Accept-Language en-us,en;q=0.5
  Accept-Encoding gzip, deflate
  Accept-Charset  ISO-8859-1,utf-8;q=0.7,*;q=0.7
  Connection  keep-alive
  X-Requested-With    XMLHttpRequest
  Referer http://localhost/groceries/groclists/view/3
  Cookie  CAKEPHP=hu7ksthrlfms0lqod3rdq296f5
  </code></pre>