Création du widget "AutoCompete" (typeahead.js)

Form/Type/AutoCompleteType.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * Widget de formulaire de type autocomplete
+ * 
+ * @name olix_autocomplete
+ * @service olix.formsext.type.autocomplete
+ * 
+ * @param config : liste des options de typeahead
+ * @param dataset : liste des options de bloodhound
+ * @link https://github.com/twitter/typeahead.js
+ *
+ * @author Olivier <sabinus52@gmail.com>
+ * 
+ * @package Olix
+ * @subpackage FormsExtBootstrapBundle
+ *
+ */
+
+namespace Olix\FormsExtBootstrapBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\OptionsResolver\OptionsResolverInterface;
+use Symfony\Component\OptionsResolver\Options;
+
+
+
+class AutoCompleteType extends AbstractType
+{
+
+    /**
+     * @see \Symfony\Component\Form\AbstractType::buildView()
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['config'] = $options['config'];
+        $view->vars['dataset'] = $options['dataset'];
+    }
+
+
+    /**
+     * @see \Symfony\Component\Form\AbstractType::setDefaultOptions()
+     */
+    public function setDefaultOptions(OptionsResolverInterface $resolver)
+    {
+        $resolver->setDefaults(array(
+            'config' => array(),
+            'dataset' => array(),
+        ));
+
+        // Les options du widget par défaut
+        $config = array(
+            'highlight'  => true,
+            'classNames' => array(
+                'menu' => 'typeahead-menu',
+                'suggestion' => 'typeahead-suggestion',
+            ),
+        );
+        $dataset = array(
+
+        );
+
+        $resolver->setNormalizers(array(
+            'config' => function (Options $options, $value) use ($config) {
+                $result = array_merge($config, $value);
+                return $result;
+            },
+            'dataset' => function (Options $options, $value) use ($dataset) {
+                $result = array_merge($dataset, $value);
+                return $result;
+            },
+        ));
+    }
+
+
+    /**
+     * @see \Symfony\Component\Form\AbstractType::getParent()
+     */
+    public function getParent()
+    {
+        return 'text';
+    }
+
+
+    /**
+     * @see \Symfony\Component\Form\FormTypeInterface::getName()
+     */
+    public function getName()
+    {
+        return 'olix_autocomplete';
+    }
+
+}

README.md

@@ -12,3 +12,4 @@ Liste des widgets disponibles :
 - [Double list mutliselect](Resources/doc/doublelist.md)
 - [Collection](Resources/doc/collection.md)
 - [Checkbox Addon](Resources/doc/checkbox-addon.md)
+- [Auto completion](Resources/doc/autocomplete.md)

Resources/config/services.yml

@@ -86,5 +86,8 @@ services:
         arguments: [ "choice" ]
         tags:
             - { name: form.type, alias: olix_checkbox_choice }
-
+    olix.formsext.type.autocomplete:
+        class: Olix\FormsExtBootstrapBundle\Form\Type\AutoCompleteType
+        tags:
+            - { name: form.type, alias: olix_autocomplete }
 

Resources/doc/autocomplete.md

@@ -0,0 +1,78 @@
+Composant TypeAhead.js
+======================
+
+typeahead.js is a fast and fully-featured autocomplete library
+
+Demo : http://twitter.github.io/typeahead.js/examples/
+
+Source : https://github.com/twitter/typeahead.js
+
+
+### Default usage
+
+Name of type : `olix_autocomplete`
+
+``` php
+// In class form
+
+public function buildForm(FormBuilder $builder, array $options)
+{
+    $builder->add('my_autocomplete1', 'olix_autocomplete', array(
+        'dataset' => array('local' => array('toto', 'titi', 'tutu'))
+    ));
+
+    // With attributes
+    $builder->add('my_autocomplete2', 'olix_autocomplete', array(
+        'config' => array(
+            'display' => "'nom'",
+            'limit' => 10,
+            'minLength' => 2,
+        ),
+        'dataset' => array(
+            'remote' => array(
+                'url' => $this->generateUrl('my_route_xxxxx', array('term' => 'TERM')),
+                'wildcard' => 'TERM'),
+            ),
+        ),
+    );
+}
+```
+
+### Options
+
+#### highlight
+**type** : `boolean`, **default** : `true`
+
+If true, when suggestions are rendered, pattern matches for the current query in text nodes
+
+#### hint
+**type** : `boolean`, **default** : `true`
+
+If false, the typeahead will not show a hint.
+
+#### minLength
+**type** : `integer`, **default** : `2`
+
+The minimum character length needed before suggestions start getting rendered
+
+#### classNames
+**type** : `array`, **default** : 
+
+For overriding the default class names used. [See for more details](https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names)
+
+#### limit
+**type** : `integer`, **default** : `8`
+
+The max number of suggestions to be displayed
+
+#### display
+**type** : `string`, **default** : none
+
+For a given suggestion, determines the string representation of it
+
+
+### Dataset
+
+Bloodhound is the typeahead.js suggestion engine
+
+[See attributes](https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md)

Resources/public/style.css

@@ -11,3 +11,43 @@
     text-align: center;
     padding: 3px 10px;
 }
+
+
+.typeahead-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  font-size: 14px;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+}
+.typeahead-suggestion {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: #333;
+  white-space: nowrap;
+}
+.typeahead-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+  background-color: #428bca;
+  outline: 0;
+}

Resources/views/Form/javascript_layout.html.twig

@@ -176,3 +176,27 @@
         });
     </script>
 {%- endblock olix_checkbox_javascript -%}
+
+{%- block olix_autocomplete_javascript -%}
+    <script type="text/javascript">
+        jQuery(document).ready(function($) {
+            var $dataset = {{ dataset|json_encode|raw }};
+            $dataset = $.extend($dataset, {
+                datumTokenizer: Bloodhound.tokenizers.whitespace,
+                queryTokenizer: Bloodhound.tokenizers.whitespace
+            });
+            var engine = new Bloodhound($dataset);
+            
+            $('#{{ id }}').typeahead({
+                highlight: {{ config.highlight|default(true) }},
+                hint: {{ config.hint|default('true') }},
+                minLength: {{ config.minLength|default(2) }},
+                classNames: {{ config.classNames|json_encode|raw }}
+            },{
+                limit: {{ config.limit|default(8) }},
+                {% if config.display is defined %}display: {{ config.display|raw }},{% endif %}
+                source: engine
+            });
+        });
+    </script>
+{%- endblock olix_autocomplete_javascript -%}

Resources/views/javascript.html.twig

@@ -11,4 +11,6 @@
 {# Collection #}
 <script src="{{ asset('bundles/olixformsextbootstrap/collection.js') }}"></script>
 {# CheckboxAddon #}
-<script src="{{ asset('bundles/olixformsextbootstrap/checkbox-addon.js') }}"></script>
+<script src="{{ asset('bundles/olixformsextbootstrap/checkbox-addon.js') }}"></script>
+{# TypeAhead.js #}
+<script src="{{ asset('public/typeahead.js/dist/typeahead.bundle.min.js') }}"></script>

composer.json

@@ -24,11 +24,24 @@
         "nostalgiaz/bootstrap-switch": "3.2.*",
         "components/bootstrap-datetimepicker": "dev-master",
         "ivaynberg/select2": "3.5.*",
-        "components/multi-select": "dev-master"
+        "components/multi-select": "dev-master",
+        "twitter/typeahead.js": "0.11.*"
     },
     "autoload" : {
         "psr-4" : {
             "Olix\\FormsExtBootstrapBundle\\" : ""
         }
+    },
+    "extra": {
+        "component": {
+            "twitter/typeahead.js": {
+                "scripts": [
+                    "dist/typeahead.jquery.js"
+                ],
+                "files": [
+                    "dist/*.js"
+                ]
+            }
+        }
     }
-}
+}