Live Demo

Form Content

This is the data that will be submitted with HTML form.

Source

This is the original input HTML.

<textarea id="textarea" class="example" rows="1"></textarea>

This is the JavaScript source that was used to initialize this demo instance of TextExt.

<script type="text/javascript">
    // a trivial hash function
    function hash(str, hashSize)
    {
        var result = 0; 
        
        for(var i = 0; i < str.length; i++) 
            result += str.charCodeAt(i) + 31 * result;
        
        return result % hashSize;
    }

    $('#textarea')
        .textext({
            plugins : 'autocomplete',

            autocomplete : {
                dropdownMaxHeight : '200px',

                render : function(suggestion)
                {
                    // `this` refers to the instance of `TextExtAutocomplete`

                    var icons = 'exclamation feed house information lock'.split(/ /g),
                        icon  = icons[hash(suggestion, icons.length)]
                        ;

                    return '<div style="background-image:url(/images/render-demo/' +
                        icon + '.png)">' + suggestion +
                        '<p>Lorem ipsum dolor sit amet, consectetur adipisicing ' +
                        'elit...</p></div>';
                }
            }
        })
        .bind('getSuggestions', function(e, data)
        {
            var list = [
                    'Basic',
                    'Closure',
                    'Cobol',
                    'Delphi',
                    'Erlang',
                    'Fortran',
                    'Go',
                    'Groovy',
                    'Haskel',
                    'Java',
                    'JavaScript',
                    'OCAML',
                    'PHP',
                    'Perl',
                    'Python',
                    'Ruby',
                    'Scala'
                ],
                textext = $(e.target).textext()[0],
                query = (data ? data.query : '') || ''
                ;

            $(this).trigger(
                'setSuggestions',
                { result : textext.itemManager().filter(list, query) }
            );
        })
        ;
</script>

<style>
    .text-label div {
        background-position : 0 0;
        background-repeat   : no-repeat;
        padding-left        : 21px;
        line-height         : 16px;
    }

    .text-label div p {
        margin      : 0;
        font-size   : 10px;
        color       : silver;
        line-height : 10px;
    }
</style>