CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
user3290332
user3290332

Reputation:

jquery auto complete style

    $(document).ready(function () {
        $("#staff").autocomplete({
            source: "/classname/methodname",
            minLength: 1,
            typeAhead: true,
            select: function (event, ui) {
            }
        })
            .data("ui-autocomplete")._renderItem = function (ul, x) {
                return $("<li>")
                  .append("<a>" + x.StaffFullName + " " + x.Department + " </a>")
                  .appendTo(ul);
            };
    });

I am using MVC to design my website, I am using autocomplete to find the names of staff who are working in a company. When I run the website I get staff fullname followed by the department. I want 3d affect. So i want a black thin line box around the results and when you hoverover a staff name it should be grey colour as the original jquery website have. Websitealso the width of my result is too large is there any way I can control it so that according to staff name width will expand.

Upvotes: 0

Views: 198

Answers (1)

Nakul91
Nakul91

Reputation: 1245

Yes you can change the width of the auto complete.
Inspect your element and find root div of auto-complete.
search for these classes:
"ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all"

.ui-widget-content {
border: 1px solid #AAAAAA;
color: #222222;
} //for background color.

.ui-menu {
display: none;
left: 561px;
top: 477px;
width: 554px;
}// for div width

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
background-color:#CCCCCC !important; 
}/**Color added for autocomplete hover on selected item**/

Upvotes: 2

Related Questions