Difference between revisions of "JQuery UI AutoComplete"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "Category:JQueryUI")
 
Line 1: Line 1:
 +
<html lang="en-us">
 +
<head>
 +
<meta charset="UTF-8">
 +
<title>Accessible Auto-complete Example</title>
 +
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
 +
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 +
<style>
 +
 +
.ui-helper-hidden {
 +
    display: none;
 +
}
 +
.ui-helper-hidden-accessible {
 +
    border: 0 none;
 +
    clip: rect(0px, 0px, 0px, 0px);
 +
    height: 1px;
 +
    margin: -1px;
 +
    overflow: hidden;
 +
    padding: 0;
 +
    position: absolute;
 +
    width: 1px;
 +
}
 +
.ui-helper-reset {
 +
    border: 0 none;
 +
    font-size: 100%;
 +
    line-height: 1.3;
 +
    list-style: none outside none;
 +
    margin: 0;
 +
    outline: 0 none;
 +
    padding: 0;
 +
    text-decoration: none;
 +
}
 +
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
 +
    border-collapse: collapse;
 +
    content: "";
 +
    display: table;
 +
}
 +
.ui-helper-clearfix:after {
 +
    clear: both;
 +
}
 +
.ui-helper-clearfix {
 +
    min-height: 0;
 +
}
 +
.ui-helper-zfix {
 +
    height: 100%;
 +
    left: 0;
 +
    opacity: 0;
 +
    position: absolute;
 +
    top: 0;
 +
    width: 100%;
 +
}
 +
.ui-front {
 +
    z-index: 100;
 +
}
 +
.ui-state-disabled {
 +
    cursor: default !important;
 +
}
 +
.ui-icon {
 +
    background-repeat: no-repeat;
 +
    display: block;
 +
    overflow: hidden;
 +
    text-indent: -99999px;
 +
}
 +
.ui-widget-overlay {
 +
    height: 100%;
 +
    left: 0;
 +
    position: fixed;
 +
    top: 0;
 +
    width: 100%;
 +
}
 +
.ui-accordion .ui-accordion-header {
 +
    cursor: pointer;
 +
    display: block;
 +
    margin-top: 2px;
 +
    min-height: 0;
 +
    padding: 0.5em 0.5em 0.5em 0.7em;
 +
    position: relative;
 +
}
 +
.ui-accordion .ui-accordion-icons {
 +
    padding-left: 2.2em;
 +
}
 +
.ui-accordion .ui-accordion-noicons {
 +
    padding-left: 0.7em;
 +
}
 +
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
 +
    padding-left: 2.2em;
 +
}
 +
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
 +
    left: 0.5em;
 +
    margin-top: -8px;
 +
    position: absolute;
 +
    top: 50%;
 +
}
 +
.ui-accordion .ui-accordion-content {
 +
    border-top: 0 none;
 +
    overflow: auto;
 +
    padding: 1em 2.2em;
 +
}
 +
.ui-autocomplete {
 +
    cursor: default;
 +
    left: 0;
 +
    position: absolute;
 +
    top: 0;
 +
}
 +
.ui-button {
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    line-height: normal;
 +
    margin-right: 0.1em;
 +
    overflow: visible;
 +
    padding: 0;
 +
    position: relative;
 +
    text-align: center;
 +
    vertical-align: middle;
 +
}
 +
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active {
 +
    text-decoration: none;
 +
}
 +
.ui-button-icon-only {
 +
    width: 2.2em;
 +
}
 +
button.ui-button-icon-only {
 +
    width: 2.4em;
 +
}
 +
.ui-button-icons-only {
 +
    width: 3.4em;
 +
}
 +
button.ui-button-icons-only {
 +
    width: 3.7em;
 +
}
 +
.ui-button .ui-button-text {
 +
    display: block;
 +
    line-height: normal;
 +
}
 +
.ui-button-text-only .ui-button-text {
 +
    padding: 0.4em 1em;
 +
}
 +
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
 +
    padding: 0.4em;
 +
    text-indent: -1e+7px;
 +
}
 +
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
 +
    padding: 0.4em 1em 0.4em 2.1em;
 +
}
 +
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
 +
    padding: 0.4em 2.1em 0.4em 1em;
 +
}
 +
.ui-button-text-icons .ui-button-text {
 +
    padding-left: 2.1em;
 +
    padding-right: 2.1em;
 +
}
 +
input.ui-button {
 +
    padding: 0.4em 1em;
 +
}
 +
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
 +
    margin-top: -8px;
 +
    position: absolute;
 +
    top: 50%;
 +
}
 +
.ui-button-icon-only .ui-icon {
 +
    left: 50%;
 +
    margin-left: -8px;
 +
}
 +
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
 +
    left: 0.5em;
 +
}
 +
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
 +
    right: 0.5em;
 +
}
 +
.ui-buttonset {
 +
    margin-right: 7px;
 +
}
 +
.ui-buttonset .ui-button {
 +
    margin-left: 0;
 +
    margin-right: -0.3em;
 +
}
 +
input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner {
 +
    border: 0 none;
 +
    padding: 0;
 +
}
 +
.ui-datepicker {
 +
    display: none;
 +
    padding: 0.2em 0.2em 0;
 +
    width: 17em;
 +
}
 +
.ui-datepicker .ui-datepicker-header {
 +
    padding: 0.2em 0;
 +
    position: relative;
 +
}
 +
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
 +
    height: 1.8em;
 +
    position: absolute;
 +
    top: 2px;
 +
    width: 1.8em;
 +
}
 +
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
 +
    top: 1px;
 +
}
 +
.ui-datepicker .ui-datepicker-prev {
 +
    left: 2px;
 +
}
 +
.ui-datepicker .ui-datepicker-next {
 +
    right: 2px;
 +
}
 +
.ui-datepicker .ui-datepicker-prev-hover {
 +
    left: 1px;
 +
}
 +
.ui-datepicker .ui-datepicker-next-hover {
 +
    right: 1px;
 +
}
 +
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
 +
    display: block;
 +
    left: 50%;
 +
    margin-left: -8px;
 +
    margin-top: -8px;
 +
    position: absolute;
 +
    top: 50%;
 +
}
 +
.ui-datepicker .ui-datepicker-title {
 +
    line-height: 1.8em;
 +
    margin: 0 2.3em;
 +
    text-align: center;
 +
}
 +
.ui-datepicker .ui-datepicker-title select {
 +
    font-size: 1em;
 +
    margin: 1px 0;
 +
}
 +
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
 +
    width: 49%;
 +
}
 +
.ui-datepicker table {
 +
    border-collapse: collapse;
 +
    font-size: 0.9em;
 +
    margin: 0 0 0.4em;
 +
    width: 100%;
 +
}
 +
.ui-datepicker th {
 +
    border: 0 none;
 +
    font-weight: bold;
 +
    padding: 0.7em 0.3em;
 +
    text-align: center;
 +
}
 +
.ui-datepicker td {
 +
    border: 0 none;
 +
    padding: 1px;
 +
}
 +
.ui-datepicker td span, .ui-datepicker td a {
 +
    display: block;
 +
    padding: 0.2em;
 +
    text-align: right;
 +
    text-decoration: none;
 +
}
 +
.ui-datepicker .ui-datepicker-buttonpane {
 +
    background-image: none;
 +
    border-bottom: 0 none;
 +
    border-left: 0 none;
 +
    border-right: 0 none;
 +
    margin: 0.7em 0 0;
 +
    padding: 0 0.2em;
 +
}
 +
.ui-datepicker .ui-datepicker-buttonpane button {
 +
    cursor: pointer;
 +
    float: right;
 +
    margin: 0.5em 0.2em 0.4em;
 +
    overflow: visible;
 +
    padding: 0.2em 0.6em 0.3em;
 +
    width: auto;
 +
}
 +
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
 +
    float: left;
 +
}
 +
.ui-datepicker.ui-datepicker-multi {
 +
    width: auto;
 +
}
 +
.ui-datepicker-multi .ui-datepicker-group {
 +
    float: left;
 +
}
 +
.ui-datepicker-multi .ui-datepicker-group table {
 +
    margin: 0 auto 0.4em;
 +
    width: 95%;
 +
}
 +
.ui-datepicker-multi-2 .ui-datepicker-group {
 +
    width: 50%;
 +
}
 +
.ui-datepicker-multi-3 .ui-datepicker-group {
 +
    width: 33.3%;
 +
}
 +
.ui-datepicker-multi-4 .ui-datepicker-group {
 +
    width: 25%;
 +
}
 +
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
 +
    border-left-width: 0;
 +
}
 +
.ui-datepicker-multi .ui-datepicker-buttonpane {
 +
    clear: left;
 +
}
 +
.ui-datepicker-row-break {
 +
    clear: both;
 +
    font-size: 0;
 +
    width: 100%;
 +
}
 +
.ui-datepicker-rtl {
 +
    direction: rtl;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-prev {
 +
    left: auto;
 +
    right: 2px;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-next {
 +
    left: 2px;
 +
    right: auto;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-prev:hover {
 +
    left: auto;
 +
    right: 1px;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-next:hover {
 +
    left: 1px;
 +
    right: auto;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-buttonpane {
 +
    clear: right;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
 +
    float: left;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group {
 +
    float: right;
 +
}
 +
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
 +
    border-left-width: 1px;
 +
    border-right-width: 0;
 +
}
 +
.ui-dialog {
 +
    left: 0;
 +
    outline: 0 none;
 +
    overflow: hidden;
 +
    padding: 0.2em;
 +
    position: absolute;
 +
    top: 0;
 +
}
 +
.ui-dialog .ui-dialog-titlebar {
 +
    padding: 0.4em 1em;
 +
    position: relative;
 +
}
 +
.ui-dialog .ui-dialog-title {
 +
    float: left;
 +
    margin: 0.1em 0;
 +
    overflow: hidden;
 +
    text-overflow: ellipsis;
 +
    white-space: nowrap;
 +
    width: 90%;
 +
}
 +
.ui-dialog .ui-dialog-titlebar-close {
 +
    height: 20px;
 +
    margin: -10px 0 0;
 +
    padding: 1px;
 +
    position: absolute;
 +
    right: 0.3em;
 +
    top: 50%;
 +
    width: 20px;
 +
}
 +
.ui-dialog .ui-dialog-content {
 +
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
 +
    border: 0 none;
 +
    overflow: auto;
 +
    padding: 0.5em 1em;
 +
    position: relative;
 +
}
 +
.ui-dialog .ui-dialog-buttonpane {
 +
    background-image: none;
 +
    border-width: 1px 0 0;
 +
    margin-top: 0.5em;
 +
    padding: 0.3em 1em 0.5em 0.4em;
 +
    text-align: left;
 +
}
 +
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
 +
    float: right;
 +
}
 +
.ui-dialog .ui-dialog-buttonpane button {
 +
    cursor: pointer;
 +
    margin: 0.5em 0.4em 0.5em 0;
 +
}
 +
.ui-dialog .ui-resizable-se {
 +
    background-position: 16px 16px;
 +
    bottom: -5px;
 +
    height: 12px;
 +
    right: -5px;
 +
    width: 12px;
 +
}
 +
.ui-draggable .ui-dialog-titlebar {
 +
    cursor: move;
 +
}
 +
.ui-menu {
 +
    display: block;
 +
    list-style: none outside none;
 +
    margin: 0;
 +
    outline: medium none;
 +
    padding: 2px;
 +
}
 +
.ui-menu .ui-menu {
 +
    margin-top: -3px;
 +
    position: absolute;
 +
}
 +
.ui-menu .ui-menu-item {
 +
    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 100%;
 +
}
 +
.ui-menu .ui-menu-divider {
 +
    border-width: 1px 0 0;
 +
    font-size: 0;
 +
    height: 0;
 +
    line-height: 0;
 +
    margin: 5px -2px;
 +
}
 +
.ui-menu .ui-menu-item a {
 +
    display: block;
 +
    font-weight: normal;
 +
    line-height: 1.5;
 +
    min-height: 0;
 +
    padding: 2px 0.4em;
 +
    text-decoration: none;
 +
}
 +
.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
 +
    font-weight: normal;
 +
    margin: -1px;
 +
}
 +
.ui-menu .ui-state-disabled {
 +
    font-weight: normal;
 +
    line-height: 1.5;
 +
    margin: 0.4em 0 0.2em;
 +
}
 +
.ui-menu .ui-state-disabled a {
 +
    cursor: default;
 +
}
 +
.ui-menu-icons {
 +
    position: relative;
 +
}
 +
.ui-menu-icons .ui-menu-item a {
 +
    padding-left: 2em;
 +
    position: relative;
 +
}
 +
.ui-menu .ui-icon {
 +
    left: 0.2em;
 +
    position: absolute;
 +
    top: 0.2em;
 +
}
 +
.ui-menu .ui-menu-icon {
 +
    float: right;
 +
    position: static;
 +
}
 +
.ui-progressbar {
 +
    height: 2em;
 +
    overflow: hidden;
 +
    text-align: left;
 +
}
 +
.ui-progressbar .ui-progressbar-value {
 +
    height: 100%;
 +
    margin: -1px;
 +
}
 +
.ui-progressbar .ui-progressbar-overlay {
 +
    background: url("images/animated-overlay.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
 +
    height: 100%;
 +
    opacity: 0.25;
 +
}
 +
.ui-progressbar-indeterminate .ui-progressbar-value {
 +
    background-image: none;
 +
}
 +
.ui-resizable {
 +
    position: relative;
 +
}
 +
.ui-resizable-handle {
 +
    display: block;
 +
    font-size: 0.1px;
 +
    position: absolute;
 +
}
 +
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
 +
    display: none;
 +
}
 +
.ui-resizable-n {
 +
    cursor: n-resize;
 +
    height: 7px;
 +
    left: 0;
 +
    top: -5px;
 +
    width: 100%;
 +
}
 +
.ui-resizable-s {
 +
    bottom: -5px;
 +
    cursor: s-resize;
 +
    height: 7px;
 +
    left: 0;
 +
    width: 100%;
 +
}
 +
.ui-resizable-e {
 +
    cursor: e-resize;
 +
    height: 100%;
 +
    right: -5px;
 +
    top: 0;
 +
    width: 7px;
 +
}
 +
.ui-resizable-w {
 +
    cursor: w-resize;
 +
    height: 100%;
 +
    left: -5px;
 +
    top: 0;
 +
    width: 7px;
 +
}
 +
.ui-resizable-se {
 +
    bottom: 1px;
 +
    cursor: se-resize;
 +
    height: 12px;
 +
    right: 1px;
 +
    width: 12px;
 +
}
 +
.ui-resizable-sw {
 +
    bottom: -5px;
 +
    cursor: sw-resize;
 +
    height: 9px;
 +
    left: -5px;
 +
    width: 9px;
 +
}
 +
.ui-resizable-nw {
 +
    cursor: nw-resize;
 +
    height: 9px;
 +
    left: -5px;
 +
    top: -5px;
 +
    width: 9px;
 +
}
 +
.ui-resizable-ne {
 +
    cursor: ne-resize;
 +
    height: 9px;
 +
    right: -5px;
 +
    top: -5px;
 +
    width: 9px;
 +
}
 +
.ui-selectable-helper {
 +
    border: 1px dotted #000000;
 +
    position: absolute;
 +
    z-index: 100;
 +
}
 +
.ui-slider {
 +
    position: relative;
 +
    text-align: left;
 +
}
 +
.ui-slider .ui-slider-handle {
 +
    cursor: default;
 +
    height: 1.2em;
 +
    position: absolute;
 +
    width: 1.2em;
 +
    z-index: 2;
 +
}
 +
.ui-slider .ui-slider-range {
 +
    background-position: 0 0;
 +
    border: 0 none;
 +
    display: block;
 +
    font-size: 0.7em;
 +
    position: absolute;
 +
    z-index: 1;
 +
}
 +
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
 +
    filter: inherit;
 +
}
 +
.ui-slider-horizontal {
 +
    height: 0.8em;
 +
}
 +
.ui-slider-horizontal .ui-slider-handle {
 +
    margin-left: -0.6em;
 +
    top: -0.3em;
 +
}
 +
.ui-slider-horizontal .ui-slider-range {
 +
    height: 100%;
 +
    top: 0;
 +
}
 +
.ui-slider-horizontal .ui-slider-range-min {
 +
    left: 0;
 +
}
 +
.ui-slider-horizontal .ui-slider-range-max {
 +
    right: 0;
 +
}
 +
.ui-slider-vertical {
 +
    height: 100px;
 +
    width: 0.8em;
 +
}
 +
.ui-slider-vertical .ui-slider-handle {
 +
    left: -0.3em;
 +
    margin-bottom: -0.6em;
 +
    margin-left: 0;
 +
}
 +
.ui-slider-vertical .ui-slider-range {
 +
    left: 0;
 +
    width: 100%;
 +
}
 +
.ui-slider-vertical .ui-slider-range-min {
 +
    bottom: 0;
 +
}
 +
.ui-slider-vertical .ui-slider-range-max {
 +
    top: 0;
 +
}
 +
.ui-spinner {
 +
    display: inline-block;
 +
    overflow: hidden;
 +
    padding: 0;
 +
    position: relative;
 +
    vertical-align: middle;
 +
}
 +
.ui-spinner-input {
 +
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
 +
    border: medium none;
 +
    color: inherit;
 +
    margin: 0.2em 22px 0.2em 0.4em;
 +
    padding: 0;
 +
    vertical-align: middle;
 +
}
 +
.ui-spinner-button {
 +
    cursor: default;
 +
    display: block;
 +
    font-size: 0.5em;
 +
    height: 50%;
 +
    margin: 0;
 +
    overflow: hidden;
 +
    padding: 0;
 +
    position: absolute;
 +
    right: 0;
 +
    text-align: center;
 +
    width: 16px;
 +
}
 +
.ui-spinner a.ui-spinner-button {
 +
    border-bottom: medium none;
 +
    border-right: medium none;
 +
    border-top: medium none;
 +
}
 +
.ui-spinner .ui-icon {
 +
    left: 0;
 +
    margin-top: -8px;
 +
    position: absolute;
 +
    top: 50%;
 +
}
 +
.ui-spinner-up {
 +
    top: 0;
 +
}
 +
.ui-spinner-down {
 +
    bottom: 0;
 +
}
 +
.ui-spinner .ui-icon-triangle-1-s {
 +
    background-position: -65px -16px;
 +
}
 +
.ui-tabs {
 +
    padding: 0.2em;
 +
    position: relative;
 +
}
 +
.ui-tabs .ui-tabs-nav {
 +
    margin: 0;
 +
    padding: 0.2em 0.2em 0;
 +
}
 +
.ui-tabs .ui-tabs-nav li {
 +
    border-bottom-width: 0;
 +
    float: left;
 +
    list-style: none outside none;
 +
    margin: 1px 0.2em 0 0;
 +
    padding: 0;
 +
    position: relative;
 +
    top: 0;
 +
    white-space: nowrap;
 +
}
 +
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
 +
    float: left;
 +
    padding: 0.5em 1em;
 +
    text-decoration: none;
 +
}
 +
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
 +
    margin-bottom: -1px;
 +
    padding-bottom: 1px;
 +
}
 +
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
 +
    cursor: text;
 +
}
 +
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
 +
    cursor: pointer;
 +
}
 +
.ui-tabs .ui-tabs-panel {
 +
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
 +
    border-width: 0;
 +
    display: block;
 +
    padding: 1em 1.4em;
 +
}
 +
.ui-tooltip {
 +
    box-shadow: 0 0 5px #AAAAAA;
 +
    max-width: 300px;
 +
    padding: 8px;
 +
    position: absolute;
 +
    z-index: 9999;
 +
}
 +
body .ui-tooltip {
 +
    border-width: 2px;
 +
}
 +
.ui-widget {
 +
    font-family: Verdana,Arial,sans-serif;
 +
    font-size: 1.1em;
 +
}
 +
.ui-widget .ui-widget {
 +
    font-size: 1em;
 +
}
 +
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
 +
    font-family: Verdana,Arial,sans-serif;
 +
    font-size: 1em;
 +
}
 +
.ui-widget-content {
 +
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
 +
    border: 1px solid #AAAAAA;
 +
    color: #222222;
 +
}
 +
.ui-widget-content a {
 +
    color: #222222;
 +
}
 +
.ui-widget-header {
 +
    background: url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;
 +
    border: 1px solid #AAAAAA;
 +
    color: #222222;
 +
    font-weight: bold;
 +
}
 +
.ui-widget-header a {
 +
    color: #222222;
 +
}
 +
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
 +
    background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
 +
    border: 1px solid #D3D3D3;
 +
    color: #555555;
 +
    font-weight: normal;
 +
}
 +
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
 +
    color: #555555;
 +
    text-decoration: none;
 +
}
 +
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
 +
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% #DADADA;
 +
    border: 1px solid #999999;
 +
    color: #212121;
 +
    font-weight: normal;
 +
}
 +
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited {
 +
    color: #212121;
 +
    text-decoration: none;
 +
}
 +
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
 +
    background: url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FFFFFF;
 +
    border: 1px solid #AAAAAA;
 +
    color: #212121;
 +
    font-weight: normal;
 +
}
 +
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
 +
    color: #212121;
 +
    text-decoration: none;
 +
}
 +
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
 +
    background: url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
 +
    border: 1px solid #FCEFA1;
 +
    color: #363636;
 +
}
 +
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
 +
    color: #363636;
 +
}
 +
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
 +
    background: url("images/ui-bg_glass_95_fef1ec_1x400.png") repeat-x scroll 50% 50% #FEF1EC;
 +
    border: 1px solid #CD0A0A;
 +
    color: #CD0A0A;
 +
}
 +
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
 +
    color: #CD0A0A;
 +
}
 +
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
 +
    color: #CD0A0A;
 +
}
 +
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
 +
    font-weight: bold;
 +
}
 +
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
 +
    font-weight: normal;
 +
    opacity: 0.7;
 +
}
 +
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
 +
    background-image: none;
 +
    opacity: 0.35;
 +
}
 +
.ui-state-disabled .ui-icon {
 +
}
 +
.ui-icon {
 +
    height: 16px;
 +
    width: 16px;
 +
}
 +
.ui-icon, .ui-widget-content .ui-icon {
 +
    background-image: url("images/ui-icons_222222_256x240.png");
 +
}
 +
.ui-widget-header .ui-icon {
 +
    background-image: url("images/ui-icons_222222_256x240.png");
 +
}
 +
.ui-state-default .ui-icon {
 +
    background-image: url("images/ui-icons_888888_256x240.png");
 +
}
 +
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
 +
    background-image: url("images/ui-icons_454545_256x240.png");
 +
}
 +
.ui-state-active .ui-icon {
 +
    background-image: url("images/ui-icons_454545_256x240.png");
 +
}
 +
.ui-state-highlight .ui-icon {
 +
    background-image: url("images/ui-icons_2e83ff_256x240.png");
 +
}
 +
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
 +
    background-image: url("images/ui-icons_cd0a0a_256x240.png");
 +
}
 +
.ui-icon-blank {
 +
    background-position: 16px 16px;
 +
}
 +
.ui-icon-carat-1-n {
 +
    background-position: 0 0;
 +
}
 +
.ui-icon-carat-1-ne {
 +
    background-position: -16px 0;
 +
}
 +
.ui-icon-carat-1-e {
 +
    background-position: -32px 0;
 +
}
 +
.ui-icon-carat-1-se {
 +
    background-position: -48px 0;
 +
}
 +
.ui-icon-carat-1-s {
 +
    background-position: -64px 0;
 +
}
 +
.ui-icon-carat-1-sw {
 +
    background-position: -80px 0;
 +
}
 +
.ui-icon-carat-1-w {
 +
    background-position: -96px 0;
 +
}
 +
.ui-icon-carat-1-nw {
 +
    background-position: -112px 0;
 +
}
 +
.ui-icon-carat-2-n-s {
 +
    background-position: -128px 0;
 +
}
 +
.ui-icon-carat-2-e-w {
 +
    background-position: -144px 0;
 +
}
 +
.ui-icon-triangle-1-n {
 +
    background-position: 0 -16px;
 +
}
 +
.ui-icon-triangle-1-ne {
 +
    background-position: -16px -16px;
 +
}
 +
.ui-icon-triangle-1-e {
 +
    background-position: -32px -16px;
 +
}
 +
.ui-icon-triangle-1-se {
 +
    background-position: -48px -16px;
 +
}
 +
.ui-icon-triangle-1-s {
 +
    background-position: -64px -16px;
 +
}
 +
.ui-icon-triangle-1-sw {
 +
    background-position: -80px -16px;
 +
}
 +
.ui-icon-triangle-1-w {
 +
    background-position: -96px -16px;
 +
}
 +
.ui-icon-triangle-1-nw {
 +
    background-position: -112px -16px;
 +
}
 +
.ui-icon-triangle-2-n-s {
 +
    background-position: -128px -16px;
 +
}
 +
.ui-icon-triangle-2-e-w {
 +
    background-position: -144px -16px;
 +
}
 +
.ui-icon-arrow-1-n {
 +
    background-position: 0 -32px;
 +
}
 +
.ui-icon-arrow-1-ne {
 +
    background-position: -16px -32px;
 +
}
 +
.ui-icon-arrow-1-e {
 +
    background-position: -32px -32px;
 +
}
 +
.ui-icon-arrow-1-se {
 +
    background-position: -48px -32px;
 +
}
 +
.ui-icon-arrow-1-s {
 +
    background-position: -64px -32px;
 +
}
 +
.ui-icon-arrow-1-sw {
 +
    background-position: -80px -32px;
 +
}
 +
.ui-icon-arrow-1-w {
 +
    background-position: -96px -32px;
 +
}
 +
.ui-icon-arrow-1-nw {
 +
    background-position: -112px -32px;
 +
}
 +
.ui-icon-arrow-2-n-s {
 +
    background-position: -128px -32px;
 +
}
 +
.ui-icon-arrow-2-ne-sw {
 +
    background-position: -144px -32px;
 +
}
 +
.ui-icon-arrow-2-e-w {
 +
    background-position: -160px -32px;
 +
}
 +
.ui-icon-arrow-2-se-nw {
 +
    background-position: -176px -32px;
 +
}
 +
.ui-icon-arrowstop-1-n {
 +
    background-position: -192px -32px;
 +
}
 +
.ui-icon-arrowstop-1-e {
 +
    background-position: -208px -32px;
 +
}
 +
.ui-icon-arrowstop-1-s {
 +
    background-position: -224px -32px;
 +
}
 +
.ui-icon-arrowstop-1-w {
 +
    background-position: -240px -32px;
 +
}
 +
.ui-icon-arrowthick-1-n {
 +
    background-position: 0 -48px;
 +
}
 +
.ui-icon-arrowthick-1-ne {
 +
    background-position: -16px -48px;
 +
}
 +
.ui-icon-arrowthick-1-e {
 +
    background-position: -32px -48px;
 +
}
 +
.ui-icon-arrowthick-1-se {
 +
    background-position: -48px -48px;
 +
}
 +
.ui-icon-arrowthick-1-s {
 +
    background-position: -64px -48px;
 +
}
 +
.ui-icon-arrowthick-1-sw {
 +
    background-position: -80px -48px;
 +
}
 +
.ui-icon-arrowthick-1-w {
 +
    background-position: -96px -48px;
 +
}
 +
.ui-icon-arrowthick-1-nw {
 +
    background-position: -112px -48px;
 +
}
 +
.ui-icon-arrowthick-2-n-s {
 +
    background-position: -128px -48px;
 +
}
 +
.ui-icon-arrowthick-2-ne-sw {
 +
    background-position: -144px -48px;
 +
}
 +
.ui-icon-arrowthick-2-e-w {
 +
    background-position: -160px -48px;
 +
}
 +
.ui-icon-arrowthick-2-se-nw {
 +
    background-position: -176px -48px;
 +
}
 +
.ui-icon-arrowthickstop-1-n {
 +
    background-position: -192px -48px;
 +
}
 +
.ui-icon-arrowthickstop-1-e {
 +
    background-position: -208px -48px;
 +
}
 +
.ui-icon-arrowthickstop-1-s {
 +
    background-position: -224px -48px;
 +
}
 +
.ui-icon-arrowthickstop-1-w {
 +
    background-position: -240px -48px;
 +
}
 +
.ui-icon-arrowreturnthick-1-w {
 +
    background-position: 0 -64px;
 +
}
 +
.ui-icon-arrowreturnthick-1-n {
 +
    background-position: -16px -64px;
 +
}
 +
.ui-icon-arrowreturnthick-1-e {
 +
    background-position: -32px -64px;
 +
}
 +
.ui-icon-arrowreturnthick-1-s {
 +
    background-position: -48px -64px;
 +
}
 +
.ui-icon-arrowreturn-1-w {
 +
    background-position: -64px -64px;
 +
}
 +
.ui-icon-arrowreturn-1-n {
 +
    background-position: -80px -64px;
 +
}
 +
.ui-icon-arrowreturn-1-e {
 +
    background-position: -96px -64px;
 +
}
 +
.ui-icon-arrowreturn-1-s {
 +
    background-position: -112px -64px;
 +
}
 +
.ui-icon-arrowrefresh-1-w {
 +
    background-position: -128px -64px;
 +
}
 +
.ui-icon-arrowrefresh-1-n {
 +
    background-position: -144px -64px;
 +
}
 +
.ui-icon-arrowrefresh-1-e {
 +
    background-position: -160px -64px;
 +
}
 +
.ui-icon-arrowrefresh-1-s {
 +
    background-position: -176px -64px;
 +
}
 +
.ui-icon-arrow-4 {
 +
    background-position: 0 -80px;
 +
}
 +
.ui-icon-arrow-4-diag {
 +
    background-position: -16px -80px;
 +
}
 +
.ui-icon-extlink {
 +
    background-position: -32px -80px;
 +
}
 +
.ui-icon-newwin {
 +
    background-position: -48px -80px;
 +
}
 +
.ui-icon-refresh {
 +
    background-position: -64px -80px;
 +
}
 +
.ui-icon-shuffle {
 +
    background-position: -80px -80px;
 +
}
 +
.ui-icon-transfer-e-w {
 +
    background-position: -96px -80px;
 +
}
 +
.ui-icon-transferthick-e-w {
 +
    background-position: -112px -80px;
 +
}
 +
.ui-icon-folder-collapsed {
 +
    background-position: 0 -96px;
 +
}
 +
.ui-icon-folder-open {
 +
    background-position: -16px -96px;
 +
}
 +
.ui-icon-document {
 +
    background-position: -32px -96px;
 +
}
 +
.ui-icon-document-b {
 +
    background-position: -48px -96px;
 +
}
 +
.ui-icon-note {
 +
    background-position: -64px -96px;
 +
}
 +
.ui-icon-mail-closed {
 +
    background-position: -80px -96px;
 +
}
 +
.ui-icon-mail-open {
 +
    background-position: -96px -96px;
 +
}
 +
.ui-icon-suitcase {
 +
    background-position: -112px -96px;
 +
}
 +
.ui-icon-comment {
 +
    background-position: -128px -96px;
 +
}
 +
.ui-icon-person {
 +
    background-position: -144px -96px;
 +
}
 +
.ui-icon-print {
 +
    background-position: -160px -96px;
 +
}
 +
.ui-icon-trash {
 +
    background-position: -176px -96px;
 +
}
 +
.ui-icon-locked {
 +
    background-position: -192px -96px;
 +
}
 +
.ui-icon-unlocked {
 +
    background-position: -208px -96px;
 +
}
 +
.ui-icon-bookmark {
 +
    background-position: -224px -96px;
 +
}
 +
.ui-icon-tag {
 +
    background-position: -240px -96px;
 +
}
 +
.ui-icon-home {
 +
    background-position: 0 -112px;
 +
}
 +
.ui-icon-flag {
 +
    background-position: -16px -112px;
 +
}
 +
.ui-icon-calendar {
 +
    background-position: -32px -112px;
 +
}
 +
.ui-icon-cart {
 +
    background-position: -48px -112px;
 +
}
 +
.ui-icon-pencil {
 +
    background-position: -64px -112px;
 +
}
 +
.ui-icon-clock {
 +
    background-position: -80px -112px;
 +
}
 +
.ui-icon-disk {
 +
    background-position: -96px -112px;
 +
}
 +
.ui-icon-calculator {
 +
    background-position: -112px -112px;
 +
}
 +
.ui-icon-zoomin {
 +
    background-position: -128px -112px;
 +
}
 +
.ui-icon-zoomout {
 +
    background-position: -144px -112px;
 +
}
 +
.ui-icon-search {
 +
    background-position: -160px -112px;
 +
}
 +
.ui-icon-wrench {
 +
    background-position: -176px -112px;
 +
}
 +
.ui-icon-gear {
 +
    background-position: -192px -112px;
 +
}
 +
.ui-icon-heart {
 +
    background-position: -208px -112px;
 +
}
 +
.ui-icon-star {
 +
    background-position: -224px -112px;
 +
}
 +
.ui-icon-link {
 +
    background-position: -240px -112px;
 +
}
 +
.ui-icon-cancel {
 +
    background-position: 0 -128px;
 +
}
 +
.ui-icon-plus {
 +
    background-position: -16px -128px;
 +
}
 +
.ui-icon-plusthick {
 +
    background-position: -32px -128px;
 +
}
 +
.ui-icon-minus {
 +
    background-position: -48px -128px;
 +
}
 +
.ui-icon-minusthick {
 +
    background-position: -64px -128px;
 +
}
 +
.ui-icon-close {
 +
    background-position: -80px -128px;
 +
}
 +
.ui-icon-closethick {
 +
    background-position: -96px -128px;
 +
}
 +
.ui-icon-key {
 +
    background-position: -112px -128px;
 +
}
 +
.ui-icon-lightbulb {
 +
    background-position: -128px -128px;
 +
}
 +
.ui-icon-scissors {
 +
    background-position: -144px -128px;
 +
}
 +
.ui-icon-clipboard {
 +
    background-position: -160px -128px;
 +
}
 +
.ui-icon-copy {
 +
    background-position: -176px -128px;
 +
}
 +
.ui-icon-contact {
 +
    background-position: -192px -128px;
 +
}
 +
.ui-icon-image {
 +
    background-position: -208px -128px;
 +
}
 +
.ui-icon-video {
 +
    background-position: -224px -128px;
 +
}
 +
.ui-icon-script {
 +
    background-position: -240px -128px;
 +
}
 +
.ui-icon-alert {
 +
    background-position: 0 -144px;
 +
}
 +
.ui-icon-info {
 +
    background-position: -16px -144px;
 +
}
 +
.ui-icon-notice {
 +
    background-position: -32px -144px;
 +
}
 +
.ui-icon-help {
 +
    background-position: -48px -144px;
 +
}
 +
.ui-icon-check {
 +
    background-position: -64px -144px;
 +
}
 +
.ui-icon-bullet {
 +
    background-position: -80px -144px;
 +
}
 +
.ui-icon-radio-on {
 +
    background-position: -96px -144px;
 +
}
 +
.ui-icon-radio-off {
 +
    background-position: -112px -144px;
 +
}
 +
.ui-icon-pin-w {
 +
    background-position: -128px -144px;
 +
}
 +
.ui-icon-pin-s {
 +
    background-position: -144px -144px;
 +
}
 +
.ui-icon-play {
 +
    background-position: 0 -160px;
 +
}
 +
.ui-icon-pause {
 +
    background-position: -16px -160px;
 +
}
 +
.ui-icon-seek-next {
 +
    background-position: -32px -160px;
 +
}
 +
.ui-icon-seek-prev {
 +
    background-position: -48px -160px;
 +
}
 +
.ui-icon-seek-end {
 +
    background-position: -64px -160px;
 +
}
 +
.ui-icon-seek-start {
 +
    background-position: -80px -160px;
 +
}
 +
.ui-icon-seek-first {
 +
    background-position: -80px -160px;
 +
}
 +
.ui-icon-stop {
 +
    background-position: -96px -160px;
 +
}
 +
.ui-icon-eject {
 +
    background-position: -112px -160px;
 +
}
 +
.ui-icon-volume-off {
 +
    background-position: -128px -160px;
 +
}
 +
.ui-icon-volume-on {
 +
    background-position: -144px -160px;
 +
}
 +
.ui-icon-power {
 +
    background-position: 0 -176px;
 +
}
 +
.ui-icon-signal-diag {
 +
    background-position: -16px -176px;
 +
}
 +
.ui-icon-signal {
 +
    background-position: -32px -176px;
 +
}
 +
.ui-icon-battery-0 {
 +
    background-position: -48px -176px;
 +
}
 +
.ui-icon-battery-1 {
 +
    background-position: -64px -176px;
 +
}
 +
.ui-icon-battery-2 {
 +
    background-position: -80px -176px;
 +
}
 +
.ui-icon-battery-3 {
 +
    background-position: -96px -176px;
 +
}
 +
.ui-icon-circle-plus {
 +
    background-position: 0 -192px;
 +
}
 +
.ui-icon-circle-minus {
 +
    background-position: -16px -192px;
 +
}
 +
.ui-icon-circle-close {
 +
    background-position: -32px -192px;
 +
}
 +
.ui-icon-circle-triangle-e {
 +
    background-position: -48px -192px;
 +
}
 +
.ui-icon-circle-triangle-s {
 +
    background-position: -64px -192px;
 +
}
 +
.ui-icon-circle-triangle-w {
 +
    background-position: -80px -192px;
 +
}
 +
.ui-icon-circle-triangle-n {
 +
    background-position: -96px -192px;
 +
}
 +
.ui-icon-circle-arrow-e {
 +
    background-position: -112px -192px;
 +
}
 +
.ui-icon-circle-arrow-s {
 +
    background-position: -128px -192px;
 +
}
 +
.ui-icon-circle-arrow-w {
 +
    background-position: -144px -192px;
 +
}
 +
.ui-icon-circle-arrow-n {
 +
    background-position: -160px -192px;
 +
}
 +
.ui-icon-circle-zoomin {
 +
    background-position: -176px -192px;
 +
}
 +
.ui-icon-circle-zoomout {
 +
    background-position: -192px -192px;
 +
}
 +
.ui-icon-circle-check {
 +
    background-position: -208px -192px;
 +
}
 +
.ui-icon-circlesmall-plus {
 +
    background-position: 0 -208px;
 +
}
 +
.ui-icon-circlesmall-minus {
 +
    background-position: -16px -208px;
 +
}
 +
.ui-icon-circlesmall-close {
 +
    background-position: -32px -208px;
 +
}
 +
.ui-icon-squaresmall-plus {
 +
    background-position: -48px -208px;
 +
}
 +
.ui-icon-squaresmall-minus {
 +
    background-position: -64px -208px;
 +
}
 +
.ui-icon-squaresmall-close {
 +
    background-position: -80px -208px;
 +
}
 +
.ui-icon-grip-dotted-vertical {
 +
    background-position: 0 -224px;
 +
}
 +
.ui-icon-grip-dotted-horizontal {
 +
    background-position: -16px -224px;
 +
}
 +
.ui-icon-grip-solid-vertical {
 +
    background-position: -32px -224px;
 +
}
 +
.ui-icon-grip-solid-horizontal {
 +
    background-position: -48px -224px;
 +
}
 +
.ui-icon-gripsmall-diagonal-se {
 +
    background-position: -64px -224px;
 +
}
 +
.ui-icon-grip-diagonal-se {
 +
    background-position: -80px -224px;
 +
}
 +
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
 +
    border-top-left-radius: 4px;
 +
}
 +
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
 +
    border-top-right-radius: 4px;
 +
}
 +
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
 +
    border-bottom-left-radius: 4px;
 +
}
 +
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
 +
    border-bottom-right-radius: 4px;
 +
}
 +
.ui-widget-overlay {
 +
    background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;
 +
    opacity: 0.3;
 +
}
 +
.ui-widget-shadow {
 +
    background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;
 +
    border-radius: 8px;
 +
    margin: -8px 0 0 -8px;
 +
    opacity: 0.3;
 +
    padding: 8px;
 +
}
 +
 +
 +
</style>
 +
</head>
 +
<body id="custom-auto">
 +
 +
<section>
 +
<h2>Available States</h2>
 +
<form id="frm_Test" action="#" method="get">
 +
<p>Please enter the state of your office location</p>
 +
<div class="ui-widget">
 +
<label for="txtState">Office Location: </label>
 +
<input id="txtState">
 +
<input type="submit" value="Go" />
 +
</div>
 +
</form>
 +
 +
</section>
 +
 +
<footer>
 +
<h2>References</h2>
 +
<ul class="ul-references">
 +
<li><a href="http://jqueryui.com/autocomplete/">AutoComplete- jQuery UI</a></li>
 +
<li><a href="http://www.marcozehe.de/2014/03/11/easy-aria-tip-7-use-listbox-and-option-roles-when-constructing-autocomplete-lists/">Easy ARIA Tip #7: Use “listbox” and “option” roles when constructing AutoComplete lists</a></li>
 +
</ul>
 +
</footer>
 +
<script type="text/javascript">
 +
$(function() {
 +
var statesList = [
 +
                "California",
 +
                "Connecticut",
 +
                "New Hampshire",
 +
                "Vermont",
 +
                "Virginia",
 +
                "Washington"
 +
                ];
 +
 +
$("#txtState").autocomplete({
 +
source: statesList,
 +
minLength: 1,
 +
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
 +
ul.attr('role', 'listitem');
 +
return $( "<li>" )
 +
.append( "<a role=\"option\">" + item.label + "</a>" )
 +
.appendTo(ul);
 +
};
 +
});
 +
 +
</script>
 +
</body>
 +
</html>
 +
 
[[Category:JQueryUI]]
 
[[Category:JQueryUI]]

Revision as of 15:51, 31 March 2014

Accessible Auto-complete Example

Available States

Please enter the state of your office location