Search code examples
csshogan.jstypeahead.js

Losing style on html tag using hogan.js and typeahead.js

I have the following script:

    $('#Entity_Wall').typeahead({
        name: 'walls',
        remote: "http://localhost/getsomestuff?text=%QUERY',
        limit: 10,
        template: '{{value}}<div class="template-wall-front-farthest" 
             style="background:url(\'{{image}}\');</div>',
        engine: Hogan
    });

I have the following stylesheet:

 .template-wall-front-farthest {
        float: left;
        margin-right: 5px;
        background-position: -132px -2px;
        width: 16px;
        height: 19px;
        background-repeat: no-repeat;
  }

When my typahead template is applied, my background image is not being positioned correctly. It floats left and have has the right dimensions, just the wrong position. In order to get it to work I have to modify my template:

template: '{{value}}<div class="template-wall-front-farthest" 
     style="background:url(\'{{image}}\');background-position: -132px -2px;"></div>'

Is there any way I can just leverage my css style, as opposed to adding this directly to my template?

Solution

  • Figured it out ... just replaced background with background-image, as follows:

        template: '{{value}}<div class="template-wall-dropdown" 
          style="background-image:url(\'{{image}}\');"></div>'