0

私は以下のようにjQueryでオートコンプリートを使用しています：

$("#myDiv").autocomplete({
}

これは標準のjQueryオートコンプリート機能です：http：//jqueryui.com/demos/autocomplete/

生成されたliタグを変更して、追加のタグを含めることはできますか？

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>
<a class="ui-corner-all" tabindex="-1">Erlang</a>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>

（追加されたテスター）になります：

<li class="ui-menu-item" mytag="tester" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>
<a class="ui-corner-all" tabindex="-1">Erlang</a>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Erlang</a></li>
4

2 に答える 2

1

フォーカスコールバック関数を使用します。このようなもの...

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  $("#tags").autocomplete({
    source: availableTags,
    focus: function(event, ui) {
        $(".ui-autocomplete li").attr("mytag", "tester");
    }
  });
});​

これを確認してください-http://jsfiddle.net/gtND8/

于 2012-09-12T12:15:40.693 に答える
0

私が正しければ、次のように_renderItemを使用してそれを行うことができます。

_renderItem: function( ul, item) {        
   return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>"+ item.label + "</a>" )
      .after( "<a>"+ item.label + "</a>" ).addClass("ui-corner-all")
      .attr("tabindex", -1)
  .appendTo( ul );
}

htmlを次のように表示します：

<li class="ui-corner-all ui-menu-item" tabindex="-1" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Erlang</a>
</li>
<a class="ui-corner-all" tabindex="-1">Erlang</a>
<li class="ui-corner-all ui-menu-item" tabindex="-1" role="menuitem">
    <a class="ui-corner-all" tabindex="-1"><strong>Erlang</strong></a>
</li>
<a class="ui-corner-all" tabindex="-1"><strong>Erlang</strong></a>

このような意味ですか。

于 2012-09-12T12:13:51.987 に答える