<input type="text" size="10" name="{{ name }}" value="{{ input_value }}" {{ extra_args }} />

{%- deferJS %}
<script type="text/javascript">
(function() {
   var init_params = {
     minimumInputLength: 2,
     containerCssClass: 'form-control',
     {%- if not required %}allowClear: true,{%- endif %}
     placeholder: '',
     multiple: {{ s2_params.multiple |tojson }},
     {%- if values %}
     initSelection : function (element, callback) {
       var data = [{% for oid, label in values %}
                   {id: {{ oid|tojson }}, text: {{ label|tojson }}}{% if not loop.last %},{%- endif %}{% endfor %}
       ];
       if (data.length > 1) debugger;
       if (data.length > 0) {
         callback(data{%- if not s2_params.multiple %}[0]{%- endif %});
       }
     },
     {%- endif %}
     {%- if s2_params.format_result %}formatResult: {{ s2_params.format_result }},{%- endif %}
     ajax: {
       url: "{{ url }}",
       dataType: 'json',
       quietMillis: 100,
       data: function (term, page) {
         return { q: term };
       },
       results: function (data, page) {
         return {results: data.results, more: false};
       }
     }
   };

  $('input[name="{{ id }}"]').data({'init-with': 'select2',
                                    'init-params': init_params}
  );
})();
</script>
{%- enddeferJS %}
