Alex Rivera | Logout

Using HTML in jQuery UI autocomplete

Asked 2010-08-15T15:31:57.570
86

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"}]
Edit
Report

1 Answer

11

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 &lt;div&gt;sample&lt;/div&gt; 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.
answered 2013-07-28T08:48:43.940

Your Answer