在jQuery用户界面自动完成功能使用HTML [英] Using HTML in jQuery UI autocomplete

问题描述

在 jQuery UI的1.8.4 的，我可以使用的 HTML JSON数组我建有一个自动完成一道，

我能够做这样的事情：

  $ row_array ['标签'] ='＆LT;跨度风格=颜色：红色; FONT-FAMILY：宋体;＆gt;用户，名称和LT; / SPAN＆GT;';
 

这将显示在下拉红色文本。

由于1.8.4不起作用。我发现 http://dev.jqueryui.com/ticket/5275 它告诉我使用自定义的HTML例子<一个HREF =htt​​p://jqueryui.com/demos/autocomplete/#custom-data>这里我有没有运气。

我

如何去获得HTML中的建议，显示？

我的jQuery是：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        $（＃findUserIdDisplay）。自动完成（{
            来源：ui_autocomplete_users_withuname.php
            的minLength：2，
            选择：函数（事件，UI）{
                $（'＃findUserId）VAL（ui.item.id）。
            }
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

我JSON阵列包括HTML这样的：

  [{标签：＆LT;跨度风格=颜色：红;＆gt;用户，名称和LT; / SPAN＆gt;中，价值：用户，名 ，ID：10}]
 

解决方案

添加到您的code：

 ）的数据（自动完成）._ renderItem =功能（UL，项目）{
            返回$（＆LT;立GT;＆LT; /李＆gt;中）
                。数据（item.autocomplete项）
                .append（＆所述a取代;+ item.label +＆下; / A＆gt;中）
                .appendTo（微升）;
        };
 

所以你的code变为：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
 $（函数（）{
     $（＃findUserIdDisplay）。自动完成（{
         来源：ui_autocomplete_users_withuname.php
         的minLength：2，
         选择：函数（事件，UI）{
             $（'＃findUserId）VAL（ui.item.id）。
             返回false;
         }
     }）。数据（UI-自动完成）._ renderItem =功能（UL，项目）{
         返回$（＆LT;立GT;＆LT; /李＆gt;中）
             。数据（item.autocomplete项）
             .append（＆所述a取代;+ item.label +＆下; / A＆gt;中）
             .appendTo（微升）;
     };
 }）;
＆LT; / SCRIPT＆GT;
 

注意：在jQueryUI的旧版本使用。数据（自动完成）而不是。数据（ UI-自动完成）

Before jQuery UI 1.8.4 I could use HTML in the JSON array I built to work with an autocomplete.

I was able to do something like:

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

That would show up as red text in the drop down.

As of 1.8.4 that does not work. I found http://dev.jqueryui.com/ticket/5275 which tells me to use the custom HTML example here which I have had no luck with.

How can I go about getting HTML to show up in the suggestion?

My jQuery is:

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

My JSON array includes HTML like the following:

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

解决方案

Add this to your code:

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

So your code becomes:

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

Note: On old versions of jQueryUI use .data("autocomplete")" instead of .data("ui-autocomplete")

这篇关于在jQuery用户界面自动完成功能使用HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！