7 users Sign-in to change your status

Provides a f***book like token autocompleter JavaScript Widget jQuery Forms

• Repository
• Download package
• Browse source

Provides a f***book like token autocompleter widget that acts like a sfWidgetFormChoiceMany.

The plugin will provide more tools later...

Developers

Name	Status	Email
Julien Lirochon	lead	ten.nohcoril <<ta>> neiluj

License

Copyright (c) 2009 Julien Lirochon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Releases for sf 1.2

Join this plugin team

Other releases

Release 0.1.0 - 14/07/2009

psToolboxPlugin

The psToolboxPlugin is a symfony plugin that may provide various tools in the future.

For now it contains a widget called psWidgetFormJQueryTokenAutocompleter that favourably replace a select element when many choices are available. You can found similar widgets on f***book mailbox, on aple mail application, on aple *phone sms application...

Using the widget

• Create two actions. init action will be used to populate tokens using default values. search action will be used for... search !

  class exampleActions extends sfActions
  {
    protected $results = array(
      1 => 'Jean Claude',
      2 => 'Marie Louise',
      3 => 'Jacques Henri',
      4 => 'Henri Jean',
      5 => 'Claude Marie'
    );
   
    public function executeInit(sfWebRequest $request)
    {
      $results = array();
      $default = $request->getParameter('default', array());
   
      if ($default)
      {
        foreach($default as $id)
        {
          if (isset($this->results[$id]))
          {
            array_push($results, array('id' => $id, 'label' => $this->results[$id]));
          }
        }
      }
   
      $this->getResponse()->setHttpHeader('Content-Type', 'application/json; charset=utf-8');
      return $this->renderText('(' . json_encode($results) . ')');
    }
   
    public function executeSearch(sfWebRequest $request)
    {
      $results = array();
      $q = $request->getParameter('q', '');
   
      if ($q)
      {
        foreach($this->results as $id => $label)
        {
          if (false===stristr($label, $q)) continue;
          array_push($results, array('id' => $id, 'label' => $label));
        }
      }
   
      $this->getResponse()->setHttpHeader('Content-Type', 'application/json; charset=utf-8');
      return $this->renderText('(' . json_encode($results) . ')');
    }
  }

• Create two routes in your routing.yml file

  autocomplete_init:
    url: /autocomplete/init
    param: { module: example, action: init }
   
  autocomplete_search:
    url: /autocomplete/search
    param: { module: example, action: search }

• Add the widget to your form

  public function configure()
  {
    // (...)
   
    $this->setWidget('author', new psWidgetFormJQueryTokenAutocompleter(array(
      'default' => array(1, 2),
      'init_url' => url_for('autocomplete_init'),
      'search_url' => url_for('autocomplete_search'),
      'theme' => 'fcbk'
    )));
   
    $this->setValidator('author', new sfValidatorChoiceMany(array(
      'choices' => array(1, 2, 3, 4, 5)
    )));
   
    // (...)
  }

  Actually two themes are available : 'fcbk' and 'lrn', but you can customize the widget as explained later in this document.

• Don't forget to load jquery library in your views, and to load form javascripts and stylesheets

  <?php include_javascript('jquery/jquery-1.3.2.min.js') ?>
  <?php include_stylesheets_for_form($form) ?>
  <?php include_javascripts_for_form($form) ?>
   
  <?php echo $form ?>

• It should work now !

Customizing the widget

You can of course create your own css files (take a look at the provided themes css)

If you need more control, say you need to display a small picture inside each token, you can create your own javascript formatter. Please note that '%close%' will be replaced by the close link.

sampleFormatter = {
  formatToken: function(data) {
    return '<img src="' + data.img + '" />' + data.label + ' %close%'
  },
  formatFeedItem: function(data) {
    return data.label;
  }
}

Then you can use widget's 'formatter' option.

$this->setWidget('author', new psWidgetFormJQueryTokenAutocompleter(array(
  'default' => array(1, 2),
  'init_url' => url_for('autocomplete_init'),
  'search_url' => url_for('autocomplete_search'),
  'formatter' => 'sampleFormatter'
)));