Javascript 将自定义标记添加到自动完成

我在jQuery中使用autocomplete，如下所示：

$("#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>

Erlang 二郎 Erlang 变成（添加测试仪）：

Erlang 二郎 Erlang

---

如果我没弄错，那么您可以使用\u 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 );
}

\u renderItem:函数（ul，项）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.after（“+item.label+”）.addClass（“ui角点全部”）
.attr（“tabindex”，-1）
.附录（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>

二郎

二郎

Erlang

Erlang

---

您的意思是这样的吗？..

使用焦点回调函数。像这样的

$(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");
    }
  });
});​

---

选中此项-

您希望在哪一点添加

mytag

属性？另外，您应该注意，如果您希望使HTML有效，则该属性应称为

data mytag

，并且您不能在

li

@Rory McCrossan之间放置

a

元素。加载页面时应添加“mytag”属性“您不能在li之间放置a元素”jQuery autocomplete函数会这样做，所以似乎可以将e元素放在li中？

$(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");
    }
  });
});​