AcDropdown

Auto-Complete Dropdown plugin.

by Troy Alford

HTML

<input type="text" id="box"></input>

CSS

.ac-dd-container 
{
    display: inline-block;
    position: relative;
}
.ac-dd-container UL,
.ac-dd-container LI {
    list-type: none;
}
.ac-dd-container INPUT[type=text] {
    margin: -1px;
    padding-right: 17px;
}

.ac-dd-btn
{
    color: #000;
    cursor: pointer;
    display: inline;
    font-size: 10px;
    position: absolute;
    margin-right: 3px;
    right: 1px; top: 4px;
    z-index: 1;
}
.ac-dd-btn.ac-disabled
{
    color: #CCC;
}

.ac-panel
{
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 0px 0px 4px 4px;
    -khtml-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    -o-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    display: none;
    margin: -1px;
    max-height: 150px;
    min-height: 16px;
    overflow-y: auto;
    position: absolute;
    text-align: left;
    width: 100%;
    z-index: 2;
}

.ac-loading
{
    background-image: url(images/loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

.ac-list
{
    list-style: none;
    margin-left: -20px;
}
.ac-list LI
{
    display: block;
    font-size: 10pt;
    list-style: none;
    margin-left: 20px;
    padding: 2px 2px 2px 5px;
}

.ac-panel, .ac-list, .ac-list LI 
{
    user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -webkit-user-select: none;
}
.ac-panel UL.ac-list LI.ac-item-hover
{
    background-color: rgb(51, 153, 255);
    color: #FFF;
}

.ac-disabled, .ac-disabled *
{
    background: #F3F3F3 !important;
    color: #999 !important;
}

JavaScript

(function($) {

    var defaults = {
        autocomplete: {
            items: null,
            itemTextField: 'Text',
            itemValueField: 'Value',

            ajaxType: 'POST',
            ajaxUrl: null,

            ajaxData: null,

            convertData: null,
            loadData: null
        },
        css: {
            containerCls: 'ac-dd-container',
            ddBtnCls: 'ac-dd-btn',
            disabledCls: 'ac-disabled',
            errorCls: 'ac-error',
            itemCls: 'ac-item',
            itemHoverCls: 'ac-item-hover',
            listCls: 'ac-list',
            loadingCls: 'ac-loading',
            panelCls: 'ac-panel'
        }
    };

    $.fn.AcDropdown = function(settings) {
        var $field = this;

        $field.attr('autocomplete', 'off'); // Disable browser-level autocomplete.
        // Returns whether or not the $field is enabled.
        $field.enabled = function() {
            if ($field.attr('readonly')) {
                return false;
            } else {
                return true;
            }
        };

        // Initialize the settings
        var options = $.extend(true, {}, defaults, settings);

        /* =================================================================== */
        /*                      Create the Container Span                      */
        /* =================================================================== */
        var $container = $('<span />')
            .addClass(options.css.containerCls)
            .insertBefore($field)
            .append($field);


        /* =================================================================== */
        /*                    Create the AutoComplete Panel                    */
        /* =================================================================== */
        var $pnl = $('<div/>').appendTo($container).addClass(options.css.panelCls);
        var $ul = $('<ul/>').appendTo($pnl).addClass(options.css.listCls);

       ...