jQuery UI 자동 완성에서 HTML 사용

jQuery UI 1.8.4 이전 에는 자동 완성 작업을 위해 만든 JSON 배열에서 HTML 을 사용할 수있었습니다 .

나는 다음과 같은 것을 할 수 있었다.

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

드롭 다운에 빨간색 텍스트로 표시됩니다.

1.8.4부터는 작동하지 않습니다. http://dev.jqueryui.com/ticket/5275 를 찾았습니다. 여기 에서 사용자 정의 HTML 예제를 사용하라고 알려줍니다 .

제안에 HTML을 표시하려면 어떻게해야합니까?

내 jQuery는 다음과 같습니다.

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

내 JSON 배열에는 다음과 같은 HTML이 포함됩니다.

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

코드에 다음을 추가하십시오.

).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        };

따라서 코드는 다음과 같습니다.

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

참고 : jQueryUI의 이전 버전에 사용하는 .data("autocomplete")"대신.data("ui-autocomplete")

이는 http://api.jqueryui.com/autocomplete/#option-source의 jquery-ui 자동 완성 문서에도 설명되어 있습니다.

트릭은 다음과 같습니다.

1. 이 jQuery UI 확장 사용
2. 그런 다음 자동 완성 옵션 패스에서 autocomplete({ html:true});
3. 이제 <div>sample</div>자동 완성을 위해 JSON 출력의 "label"필드에 html 을 전달할 수 있습니다 .

JQuery UI에 플러그인을 추가하는 방법을 모르는 경우 :

1. 플러그인 (Scott González의 html 확장자)을 js 파일에 저장하거나 js 파일을 다운로드하십시오.
2. html 페이지 (또는 jquery-ui js 파일)에 jquery-ui 자동 완성 스크립트를 이미 추가했습니다. 자동 완성 자바 스크립트 파일 뒤에이 플러그인 스크립트를 추가합니다.

이 솔루션은 권장되지 않지만 소스 파일 jquery.ui.autocomplete.js (v1.10.4) 만 편집 할 수 있습니다.

실물:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

결정된:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

동일한 문제가 있었지만 성능을 위해 옵션 ( 'source')에 정적 옵션 배열을 사용하는 것을 선호합니다. 이 솔루션으로 시도한 경우 jQuery도 전체 레이블에서 검색한다는 것을 알 수 있습니다.

예 : 제공 한 경우 :

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

그런 다음 "span"을 입력하면 두 결과가 모두 일치하여 값에 대한 검색이 $.ui.autocomplete.filter함수 보다 우선합니다 .

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

마지막 매개 변수 c.value를 원하는대로 편집 할 수 있습니다 . 예를 들어 c.id || c.label || c.value레이블, 값 또는 ID를 검색 할 수 있습니다.

자동 완성의 소스 매개 변수에 원하는만큼의 키 / 값을 제공 할 수 있습니다.

추신 : 원래 매개 변수는 c.label||c.value||c입니다.

Clarence가 언급 한 문제가있었습니다. 스타일과 이미지로 멋지게 보이도록 HTML 을 제공해야했습니다 . 이로 인해 모든 요소와 일치하는 "div"를 입력했습니다.

하지만 내 가치는 단지 ID 번호 였기 때문에 검색이 그저 실행되는 것을 허용 할 수 없었습니다. ID 번호뿐만 아니라 여러 값을 찾기 위해 검색이 필요했습니다.

내 솔루션은 검색 값만 포함하는 새 필드를 추가하고 jQuery UI 파일에서 확인하는 것이 었습니다. 이것이 내가 한 일입니다.

(이는 jQuery UI 1.9.2에 있으며 다른 사용자와 동일 할 수 있습니다.)

6008 행에서 필터 기능 편집 :

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

"value.searchonly"필드에 대한 검사를 추가했습니다. 있는 경우 해당 필드 만 사용합니다. 거기에 없으면 정상적으로 작동합니다.

그런 다음 JSON 개체에 "검색 전용"키를 추가 할 수 있다는 점을 제외하고는 이전과 동일하게 자동 완성을 사용합니다.

누군가에게 도움이되기를 바랍니다!