Использование JQuery UI Autocomplete в Cakephp 2.0 - PullRequest
Новая
       22

Использование JQuery UI Autocomplete в Cakephp 2.0

0 голосов
/ 17 сентября 2011

У меня проблемы с реализацией автозаполнения JQuery UI в CakePHP 2.0.Хотите отобразить список элементов в представлении списка покупок, чтобы пользователи могли выбрать элемент, уже находящийся в базе данных, вместо создания нового.

Application Jquery : 

////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();
}

Форма элемента в представлении: 

    <div class="items form">
    <?php echo $this->Form->create('Item', array('action' => 'search')); ?>
        <?php echo $this->Form->input('item', array('type' => 'text', 'id' => 'item', 'label' => 'Search')); ?>
    <?php echo $this->Form->end(__('Submit', true)); ?>
</div>

Поиск элементов управления (): 

public function search() {
            if ($this->RequestHandler->isAjax()) {
                Configure::write('debug', 0);
                $this->autoRender = false;
                $query = $_GET['term'];
                $searchitems = $this->Item->find('all', array(
                    'conditions' => array('Item.name LIKE' => '%' . $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->data)) {
                    $this->set('items', $this->paginate(array('Item.name LIKE' => '%' . $this->data['Item']['name'] . '%')));
                }
            }
        }

Я нахожусь наПотеря, любые входные данные приветствуются.

После внесения вышеуказанных изменений в Application.js я теперь получаю ответ на свою веб-страницу.Он имеет правильное количество результатов, основанных на том, что включено в базу данных в данный момент, однако это нулевой ответ.От Firebug ответ выглядит следующим образом: 

[{"value":null,"label":null},{"value":null,"label":null},{"value":null,"label":null},{"value":null,"label":null}]

Вот мои заголовки ответа: 

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

1 Ответ

0 голосов
/ 17 сентября 2011

Мне не совсем понятно, о чем вы спрашиваете, но вот Javascript, который я использовал для этого в CakePHP 1.2 и 1.3: 

$.ajax({
  url: '/api/v1/zip_codes/utilities/' + zip + '/' + type + '.json',
  type: 'GET',
  dataType: 'json',
  success: function( data, status ) {
    var utility_type = data.Type.name;

    var $provider_name = $('#Building' + utility_type + 'ProviderName');
    var $provider_id   = $('#Building' + utility_type + 'ProviderId');

    // Massage the Cake data into something autocomplete-friendly
    var $friendly = $.map( data.Utilities, function( util ) {
    return { label: util.Utility.name, value: util.Utility.id };
  });

  // If more than one, populate the provider autocomplete options
  $provider_name.autocomplete({
    source: $friendly, // use the autocomplete-friendly data
    minLength: 0,
    focus: function( event, ui ) {
      $provider_name.val( ui.item.label );
      return false;
    },
    select: function( event, ui ) {
      $provider_name.val( ui.item.label );
      $provider_id.val( ui.item.value );
      return false;
    }
  }).data( 'autocomplete' )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( '<a>' + item.label + '</a>' )
      .appendTo( ul );
  };
});

Этот фрагмент извлекает имя и идентификатор коммунального предприятия, работающего с данным почтовым индексом (просто для небольшого контекста). Для получения дополнительной информации вопрос, который я задавал об этой же проблеме , может помочь.

...