jQuery UI 자동 완성에서 HTML 사용

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")

---

This is also documented in jquery-ui autocomplete documentation at: http://api.jqueryui.com/autocomplete/#option-source

The trick is:

1. Use this jQuery UI extension
2. Then in autocomplete option pass autocomplete({ html:true});
3. Now you can pass html <div>sample</div> in "label" field of JSON output for autocomplete.

If you don't know how to add the plugin to JQuery UI then:

1. Save the plugin(Scott González' html extension) in a js file or download the js file.
2. You have already added the jquery-ui autocomplete script in your html page(or the jquery-ui js file). Add this plugin script after that autocomplete javascript file.

---

This solution is not recommended but you can just edit source file jquery.ui.autocomplete.js (v1.10.4)

Original:

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

Fixed:

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

---

I had the same issue, but I prefer to use a static array of options for my option('source') for performance. If you tried that with this solution, you'll find that jQuery searches on the entire label too.

EG if you supplied:

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

Then typing "span" would match both results, to get it to search on the value only override the $.ui.autocomplete.filter function:

$.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)})}

You can edit the last parameter c.value to anything you want, e.g. c.id || c.label || c.value would allow you to search on label, value, or the id.

You can supply as many key/values to autocomplete's source parameter as you want.

PS: the original parameter is c.label||c.value||c.

---

I had the issue mentioned by Clarence. I needed to supply HTML to make a nice appearance with styles and images. This resulted in typing "div" matching all elements.

However, my value was only an ID number, so I couldn't allow the search to run off of just that. I needed the search to look for several values, not just the ID number.

My solution was to add a new field that held only the search values and check for that in the jQuery UI file. This is what I did:

(This is on jQuery UI 1.9.2; it may be the same on others.)

Edit filter function on line 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);
        });
    }

I added the check for the "value.searchonly" field. If it is there, it uses that field only. If it is not there, it works as normal.

Then you use the autocomplete exactly as before, except you can add the "searchonly" key to your JSON object.

I hope that helps someone!

참고URL : https://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete