AutoCompleteWidget creates unwanted span tag

[renierdbruyn]

I have modified the Deform Templates to create a Horizontal form(see #214 ). I am having trouble with the AutocompleteWidget.

Here is the code from the template autocomplete_input.pt:

<span tal:define="name name|field.name;
                      css_class css_class|field.widget.css_class;
                      oid oid|field.oid;
                      style style|field.widget.style"
          tal:omit-tag="">
        <input type="text"
               name="${name}"
               value="${cstruct}"
               data-provide="typeahead"
               tal:attributes="class string: form-control ${css_class};
                               style style"
               id="${oid}"/>
        <script tal:condition="field.widget.values" type="text/javascript">
            deform.addCallback(
              '${field.oid}',
              function (oid) {
                  $('#' + oid).typeahead(${options});
              }
            );
        </script>
    </span>

, the modified mapping_item.pt:

    <br>
    <div tal:define="error_class error_class|field.widget.error_class;
                     description description|field.description;
                     title title|field.title;
                     oid oid|field.oid;
                     hidden hidden|field.widget.hidden;
                     category category|field.widget.category;
                     structural hidden or category == 'structural';
                     required required|field.required;"
         class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''}"
         title="${description}"
         id="item-${oid}"
         tal:omit-tag="structural"
         i18n:domain="deform">
    <div class="controls">
      <label for="${oid}"
             class="control-label col-sm-2 ${required and 'required' or ''}"
             tal:condition="not structural"
             id="req-${oid}"
             >
        ${title}
      </label>

      <div tal:define="input_prepend field.widget.input_prepend | None;
                       input_append field.widget.input_append  | None"
           tal:omit-tag="not (input_prepend or input_append)"
           class="input-group">
        <span class="input-group-addon"
              tal:condition="input_prepend">${input_prepend}</span
        ><span tal:replace="structure field.serialize(cstruct).strip()"
        /><span class="input-group-addon"
                tal:condition="input_append">${input_append}</span>
      </div>
          </div>

      <p class="help-block"
         tal:define="errstr 'error-%s' % field.oid"
         tal:repeat="msg field.error.messages()"
         i18n:translate=""
         tal:attributes="id repeat.msg.index==0 and errstr or
         ('%s-%s' % (errstr, repeat.msg.index))"
         tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
        ${msg}
      </p>

      <p tal:condition="field.description and not field.widget.hidden"
         class="help-block" >
        ${field.description}
      </p>
    </div>

and here is the generated HTML:

    <div class="controls">
      <label for="deformField7" class="control-label col-sm-2 required" id="req-deformField7">
        Team
      </label>


        <span style="position: relative; display: inline-block;" class="twitter-typeahead">
    <input style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background: none repeat scroll 0% 0% rgb(255, 255, 255);" class="tt-hint" autocomplete="off" spellcheck="off" disabled="" type="text">
    <input dir="auto" spellcheck="false" autocomplete="off" name="team" value="" data-provide="typeahead" id="deformField7" class="form-control  tt-query" style="width: 250px; position: relative; vertical-align: top; background-color: transparent;" type="text">
    <span style="position: absolute; left: -9999px; visibility: hidden; white-space: nowrap; font-family: &quot;Ubuntu&quot;,Tahoma,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;"></span>
    <span style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;" class="tt-dropdown-menu">
    </span>
    </span>
        <script type="text/javascript">
            deform.addCallback(
              'deformField7',
              function (oid) {
                  $('#' + oid).typeahead({"minLength": 3, "remote": "/org/autocomplete?term=%QUERY", "limit": 8});
              }
            );
        </script>

          </div>

Now the span in question is <span style="position: relative; display: inline-block;" class="twitter-typeahead"> I do not know where this is being generated.

I have looked in /templates dir, but cant find anything..

Is it auto generated by the typeahead javascript function?
The span is messing up the horizontal form layout, I need to find what is generating the span, and remove/modify it.

Any ideas on what(specific line of code) might be generating this?

How can I prevent this from generating?

[dairiki]

Yes, that span.twitter-typeahead and a bunch of the chaff within it are inserted by the twitter typeahead javascript code which is used to implement the auto-completing. The CSS in static/css/typeahead.css is necessary to get things to display correctly.

I suspect that that CSS is not being properly included in your page. Check that the CSS requirements from form.get_widget_resources() are being properly <link>ed in your <head>.

[stevepiercy]

I've assigned this PR to the Deform 2.1.0 milestone.

For Deform 3.x, we will have a new repository for custom Deform templates that implement horizontal layouts and any other widget that is not provided with Deform.