2011-02-11 69 views
1

我使用jQuery UI Autocomplete插件内的jQuery模板,以便更好地控制自动填充结果的呈现方式。我想要做的是突出显示结果中的输入。 http://jqueryui.com/demos/autocomplete/combobox.html是我试图实现的一个很好的例子,只是我想用jQuery模板来实现它。在jQuery模板中调用的函数中包含标记?

这是我迄今(有一些自动完成代码的抽象出来):

<script> 
    // in this example, this.term == 'dog' 
    $('#tmplProject').tmpl({text: "All About Dogs"}, 
    {term: this.term, highlight: function(text) { 
     return text.replace(new RegExp(
        "(?![^&;]+;)(?!<[^<>]*)(" + 
        $.ui.autocomplete.escapeRegex(this.term) + 
        ")(?![^<>]*>)(?![^&;]+;)", "gi" 
       ), "<strong>$1</strong>"); 
    }})) 
</script> 
<script id="tmplProject" type="text/x-jquery-tmpl"> 
    some other markup goes here. ${$item.highlight(name)} 
</script> 

的问题是,在<strong>元素越来越逃出来的,All about <strong>Dog</strong>s是显示在浏览器了。但这种做法很有意义,因为模板应该是标记的位置,而不是高亮方法。那么如何将突出显示方法的逻辑与生成的标记分开?

回答

2

{{html}}标签是否适合您?

<script id="tmplProject" type="text/x-jquery-tmpl"> 
    some other markup goes here. {{html $item.highlight(name) }} 
</script> 

像这样:http://jsfiddle.net/rniemeyer/baY3k/

+0

谢谢,我一定是错过了这个地方的文档。这对我的例子完美的作品,但我很好奇,我将如何保持模板标记,而不是突出方法本身? – carpeliam 2011-02-11 18:14:25

相关问题