Question

I have two JQuery autocomplete’s on a screen. One is mandatory, the other is not.

I have some javascript which sets them up slightly differently.

The problem I have is styling the drop down with a ‘mandatory’ css class to make it show up as mandatory visually (to non-visually impared users…)

I have styled the input box that is created, that’s not a problem.

(function ($) {
            $.widget("ui.comboboxMan", {
                _create: function () {
                    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : $("#PickListSessionDefault").val()
                    var input = this.input = $("<Input>")
                    .addClass("ui-textbox")
                    .addClass("mandatory")
                    .insertAfter(select)
                    .val(value) 

But I want to add the same madatory class to the pick list.

I tried this:

                    open: function (event, ui) {
                        $('ul.ui-autocomplete').addClass('mandatory');
                        $('ul.ui-autocomplete li').addClass('mandatory');
                    },  

But that results in some of the items not having the background over the WHOLE width. there is a thin strip of white to the left and a thicker one to the right. CSS is:

.mandatory
{
    background-color: #b9ffb9;
}

Suggestions?

Answer 1

Perhaps you want to use the _renderItem. I used a custom format with category an id etc, yours will differ.

snip...rest of autocomplete here
    open: function(event, ui)
        {
        }
}).data("autocomplete")._renderItem = function(ul, item)
{
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.Id + " <span class='autoCompCat'>" + item.Category + "</span> <span class='autoCompText'>" + item.MyText + "</span></a>")
        .appendTo(ul);
};

in my case, I used a function in the source with some ajax stuff to add to the item: example function not optimal just painfully obvious 🙂

function myAutocompleteJSONParse(data)
{
    var rows = new Array();
    var rowData = null;
    for (var i = 0, dataLength = data.length; i < dataLength; i++)
    {
        rowData = data[i];
        rows[i] = {
            Id: rowData.ProcedureCode,
            value: rowData.Description,
            label: rowData.Description,
            Category: rowData.Category,
            MyText: rowData.Description
        };
    }
    return rows;
};