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 回答