Permalink
Browse files

added a basic text autocompleter

  • Loading branch information...
1 parent 6f509c9 commit ca8ff816ae5cc1c7640f79b81b251d36435a5677 bilel committed Jun 22, 2012
@@ -0,0 +1,60 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Olivier Chauvel <olivier@generation-multiple.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Genemu\Bundle\FormBundle\Form\JQuery\DataTransformer;
+
+use Symfony\Component\Form\DataTransformerInterface;
+use Symfony\Component\Form\Exception\UnexpectedTypeException;
+
+/**
+ * {@inheritdoc}
+ *
+ * @author Bilal Amarni <bilal.amarni@gmail.com>
+ */
+class ArrayToStringTransformer implements DataTransformerInterface
+{
+ /**
+ * {@inheritdoc}
+ */
+ public function transform($array)
+ {
+ if (null === $array || !is_array($array)) {
+ return array();
+ }
+
+ return implode(', ', $array) . ', ';
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function reverseTransform($string)
+ {
+ if (is_array($string)) {
+ return $string;
+ }
+
+ $array = explode(',', $string);
+
+ foreach ($array as $key => $value) {
+ $value = trim($value);
+
+ if (empty($value)) {
+ unset($array[$key]);
+ continue;
+ }
+
+ $array[$key] = $value;
+ }
+
+ return $array;
+ }
+}
@@ -0,0 +1,79 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Olivier Chauvel <olivier@generation-multiple.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Genemu\Bundle\FormBundle\Form\JQuery\Type;
+
+use Genemu\Bundle\FormBundle\Form\JQuery\DataTransformer\ArrayToStringTransformer;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormViewInterface;
+use Symfony\Component\OptionsResolver\Options;
+use Symfony\Component\OptionsResolver\OptionsResolverInterface;
+
+/**
+ * @author Bilal Amarni <bilal.amarni@gmail.com>
+ */
+class TextAutocompleterType extends AbstractType
+{
+ /**
+ * {@inheritdoc}
+ */
+ public function buildForm(FormBuilderInterface $builder, array $options)
+ {
+ if ($options['multiple']) {
+ $builder
+ ->resetViewTransformers()
+ ->addViewTransformer(new ArrayToStringTransformer())
+ ;
+ }
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function buildView(FormViewInterface $view, FormInterface $form, array $options)
+ {
+ $view->addVars(array(
+ 'suggestions' => $options['suggestions'],
+ 'multiple' => $options['multiple'],
+ 'route_name' => $options['route_name'],
+ ));
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setDefaultOptions(OptionsResolverInterface $resolver)
+ {
+ $resolver->setDefaults(array(
+ 'suggestions' => array(),
+ 'route_name' => null,
+ 'multiple' => false,
+ ));
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getParent()
+ {
+ return 'text';
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getName()
+ {
+ return 'genemu_jqueryautocompleter_text';
+ }
+}
@@ -21,6 +21,9 @@
<services>
<service id="genemu.form.jquery.type.autocompleter" class="Genemu\Bundle\FormBundle\Form\JQuery\Type\AutocompleterType" abstract="true" />
+ <service id="genemu.form.jquery.type.autocompleter.text" class="Genemu\Bundle\FormBundle\Form\JQuery\Type\TextAutocompleterType">
+ <tag name="form.type" alias="genemu_jqueryautocompleter_text" />
+ </service>
<service id="genemu.form.jquery.type.chosen" class="Genemu\Bundle\FormBundle\Form\JQuery\Type\ChosenType" abstract="true" />
<service id="genemu.form.jquery.type.color" class="Genemu\Bundle\FormBundle\Form\JQuery\Type\ColorType">
<tag name="form.type" alias="genemu_jquerycolor" />
@@ -17,6 +17,10 @@ public function buildForm(FormBuilder $builder, array $options)
## Extra
+### Text
+1. [Text](https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/jquery/autocomplete/text.md)
+2. [Ajax Suggestions](https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/jquery/autocomplete/text_ajax.md)
+
### Choices
1. [Choices](https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/jquery/autocomplete/choices.md)
2. [Ajax Choices](https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/jquery/autocomplete/choices_ajax.md)
@@ -0,0 +1,20 @@
+# Use JQueryAutocomplete to suggest values on a text field
+
+## Usage:
+
+``` php
+<?php
+// ...
+public function buildForm(FormBuilder $builder, array $options)
+{
+ $builder
+ ->add('soccer_player', 'genemu_jqueryautocompleter_text', array(
+ 'suggestions' => array('Ozil', 'Van Persie'),
+ 'multiple' => true
+ ));
+}
+```
+
+## Extra
+
+[Ajax Suggestions](https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/jquery/autocomplete/text_ajax.md)
@@ -0,0 +1,49 @@
+# Use JQueryAutocomplete to suggest values using Ajax
+
+## Usage:
+
+``` php
+<?php
+// ...
+public function buildForm(FormBuilder $builder, array $options)
+{
+ $builder
+ ->add('ajax_simple', 'genemu_jqueryautocompleter_text', array(
+ 'route_name' => 'ajax'
+ ))
+ ->add('ajax_multiple', 'genemu_jqueryautocompleter_text', array(
+ 'route_name' => 'ajax',
+ 'multiple' => true
+ ));
+}
+```
+
+## Add function ajaxAction to Controller:
+
+``` php
+<?php
+namespace MyNamespace;
+
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Symfony\Component\HttpFoundation\Response;
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
+
+class MyClassAjaxController extends Controller
+{
+ /**
+ * @Route("/ajax", name="ajax")
+ */
+ public function ajaxAction(Request $request)
+ {
+ $value = $request->get('term');
+
+ // .... (Search values)
+ $search = array('Bar', 'Foo');
+
+ $response = new Response();
+ $response->setContent(json_encode($search));
+
+ return $response;
+ }
+}
+```
@@ -358,6 +358,56 @@
{% endspaceless %}
{% endblock genemu_jqueryautocompleter_javascript %}
+{% block genemu_jqueryautocompleter_text_javascript %}
+{% spaceless %}
+ <script type="text/javascript">
+ jQuery(document).ready(function($) {
+ var $autocompleter = $('#{{ id }}');
+ var $configs = {
+ focus: function(event, ui) {
+ return false;
+ },
+ select: function(event, ui) {
+ {% if multiple %}
+ terms = this.value.split(/,\s*/);
+ terms.pop();
+ terms.push(ui.item.value);
+ terms.push('');
+ this.value = terms.join(', ');
+ {% else %}
+ this.value = ui.item.value;
+ {% endif %}
+
+ return false;
+ }
+ };
+
+ {% if route_name %}
+ $configs.source = function(request, response) {
+ $.getJSON('{{ path(route_name) }}', {
+ term: request.term
+ }, response);
+ };
+ {% else %}
+ $configs.source = {{ suggestions|json_encode|raw }};
+ {% endif %}
+
+ $autocompleter.autocomplete($configs);
+
+ {% if multiple %}
+ var $source = $autocompleter.data('autocomplete').source;
+
+ $autocompleter.autocomplete('option', 'source', function(request, response) {
+ request.term = request.term.split(/,\s*/).pop();
+
+ $source(request, response);
+ });
+ {% endif %}
+ });
+ </script>
+{% endspaceless %}
+{% endblock %}
+
{% block genemu_jquerychosen_javascript %}
{% spaceless %}
<script type="text/javascript">
@@ -0,0 +1,99 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Olivier Chauvel <olivier@generation-multiple.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Genemu\Bundle\FormBundle\Tests\Form\JQuery\Type;
+
+use Genemu\Bundle\FormBundle\Tests\Form\Type\TypeTestCase;
+use Genemu\Bundle\FormBundle\Form\JQuery\Type\TextAutocompleterType;
+
+/**
+ * @author Bilal Amarni <bilal.amarni@gmail.com>
+ */
+class TextAutocompleterTypeTest extends TypeTestCase
+{
+ public function testDefaultConfigs()
+ {
+ $form = $this->factory->create(new TextAutocompleterType());
+ $view = $form->createView();
+
+ $this->assertEquals(array(), $view->getvar('suggestions'));
+ $this->assertEquals('', $form->getViewData());
+ $this->assertEquals('', $view->getVar('value'));
+ $this->assertNull($view->getVar('route_name'));
+ }
+
+ public function testValue()
+ {
+ $form = $this->factory->create(new TextAutocompleterType(), null, array(
+ 'suggestions' => array('Foo', 'Bar')
+ ));
+
+ $form->setData('Foo');
+ $view = $form->createView();
+
+ $this->assertEquals(array('Foo', 'Bar'), $view->getVar('suggestions'));
+ $this->assertEquals('Foo', $form->getViewData());
+ $this->assertEquals('Foo', $view->getVar('value'));
+ }
+
+ public function testValueWithAjax()
+ {
+ $form = $this->factory->create(new TextAutocompleterType(), null, array(
+ 'route_name' => 'genemu_choice'
+ ));
+
+ $form->setData('Foo');
+ $view = $form->createView();
+ $form->bind('Bar');
+
+ $this->assertEquals(array(), $view->getVar('suggestions'));
+ $this->assertEquals('Bar', $form->getViewData());
+
+ $this->assertEquals('Bar', $form->getData());
+ }
+
+ public function testValueMultipleWithAjax()
+ {
+ $form = $this->factory->create(new TextAutocompleterType(), null, array(
+ 'route_name' => 'genemu_choice',
+ 'multiple' => true
+ ));
+
+ $form->setData(array('Foo', 'Bar'));
+ $view = $form->createView();
+ $form->bind(array('Foo', 'Ri'));
+
+ $this->assertEquals(array(), $view->getVar('suggestions'));
+ $this->assertEquals('Foo, Ri, ', $form->getViewData());
+
+ $this->assertEquals(array('Foo', 'Ri'), $form->getData());
+ }
+
+ public function testValueMultiple()
+ {
+ $form = $this->factory->create(new TextAutocompleterType(), null, array(
+ 'suggestions' => array('Foo', 'Bar', 'Ri'),
+ 'multiple' => true
+ ));
+
+ $form->setData(array('Foo', 'Bar'));
+ $view = $form->createView();
+ $form->bind(array('Foo'));
+
+ $this->assertEquals('Foo, ', $form->getViewData());
+
+ $this->assertEquals(array('Foo'), $form->getData());
+
+ $this->assertEquals(array('Foo', 'Bar', 'Ri'), $view->getVar('suggestions'));
+
+ $this->assertEquals('Foo, Bar, ', $view->getVar('value'));
+ }
+}

0 comments on commit ca8ff81

Please sign in to comment.