1

jQuery UIオートコンプリートプラグイン内からjQueryテンプレートを使用しているので、オートコンプリートの結果のレンダリング方法をより適切に制御できます。私がやりたいのは、結果内の入力を強調表示することです。http://jqueryui.com/demos/autocomplete/combobox.htmlは、私が達成しようとしていることの良い例です。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され、ブラウザに表示されていることです。ただし、この種の意味はあります。テンプレートは、ハイライト方法ではなく、マークアップがある場所にある必要があるためです。では、ハイライトメソッドのロジックを生成されるマークアップからどのように分離するのですか？

4

1 に答える 1

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/

于 2011-02-11T17:27:37.227 に答える