2012-09-12 2 views
0
나는 다음과 같이 jQuery를에 자동 완성을 사용하고

:는 사용자 정의 태그 자동 완성 추가

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

이 표준의 jQuery 자동 완성 기능은 http : //jqueryui.com/demos/autocomplete/

생성 된 li 태그가 추가 태그를 포함하도록 수정 될 수 있습니까? 난 당신이 바로, 다음과 같이 그 일을 위해 _renderItem를 사용할 수있어 경우

<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> 
+0

어떤 시점에서 당신은'mytag' 속성을 추가 할 찾고 계십니까? 또한 HTML을 유효하게 만들려면 속성을'data-mytag'라고 지정해야하며'li' 사이에'a' 요소를 넣을 수는 없습니다. –

+0

@Rory McCrossan 페이지가로드 될 때 "mytag"속성을 추가해야합니다. "jQuery 자동 완성 함수가 li 사이에 요소를 배치 할 수 없습니다"그러면 e 요소가 li로 배치 될 수 있습니다. –

답변

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/

0

가 :

_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-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-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> 

다음과 같은 의미입니까?

관련 문제