Inputtextarea Inputtextarea provides autoComplete, autoResize, remaining characters counter features.

Default



AutoResize



Maxlength with Remaining Chars



AutoComplete

$('#default').puiinputtextarea();
                                
<textarea id="default" ></textarea>
                                

Note: Inputtextarea requires rangyinput and cursorposition plugins for autocomplete mode.

Name Type Default Description
autoResize Boolean false Defines if textarea increase its size automatically.
autoComplete Boolean false Defines if textarea auto complete words.
maxlength Integer null Determines the maximum letters in textarea.
counter Integer null Determines total length of letters.
counterTemplate String '{0}' Template the string which shows, how many letters left.
minQueryLength Integer 3 Number of characters to be typed to run a query.
queryDelay Integer 700 Delay in ms before sending each query.
Name Parameters Description
itemselect event: puitextareaitemselect event
item: selected item from callback.
Fired when suggested item select. Autocomplete option must be true for run.

Example

$('#default').puiinputtextarea({
    itemselect: function(event, item) {
        //...
    }
});
                                
Name Parameters Description
search query: String that wanted to search in textarea. Search the string in textarea.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#default').puiinputtextarea('hide');
                                
<script type="text/javascript">
$(function() {
    $('#basic').puiinputtextarea();

    $('#resize').puiinputtextarea({autoResize:true});

    $('#counter').puiinputtextarea({counter:$('#display'), counterTemplate:'{0} characters remaining.', maxlength:10});

    $('#ac').puiinputtextarea({
        autoComplete:true
        ,scrollHeight:150
        ,completeSource:function(request, response) {
            $.ajax({
                type: "GET",
                url: 'rest/autocomplete/' + request.query,
                dataType: "json",
                context: this,
                success: function(data) {
                    response.call(this, data);
                }
            });
        }
    });

});
</script>
                                
<textarea id="basic" rows="5" cols="30"></textarea>

<textarea id="resize" rows="5" cols="30"></textarea>

<textarea id="counter" rows="5" cols="30"></textarea>

<textarea id="ac" rows="5" cols="30"></textarea>