jqxTextArea API Reference

Name Type Default

disabled Boolean false

Enables or disables the jqxTextArea.

Code examples

Set the disabled property.

$('#jqxTextArea').jqxTextArea({ disabled: false });

Get the disabled property.

var disabled = $('#jqxTextArea').jqxTextArea('disabled');

Try it: disabled is set to true

displayMember String ''

Sets or gets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property.

Code example

Set the displayMember property.

$("#jqxTextArea").jqxTextArea({ displayMember: 'firstName' });

Get the displayMember property.

var displayMember = $('#jqxTextArea').jqxTextArea('displayMember');

Try it: displayMember is set to "ContactName"

dropDownWidth Number/String null

Sets or gets the jqxTextArea's dropdown (pop-up) width.

Code examples

Set the dropDownWidth property.

$('#jqxTextArea').jqxTextArea({ dropDownWidth: 200 });

Get the dropDownWidth property.

var dropDownWidth = $('#jqxTextArea').jqxTextArea('dropDownWidth');

Try it: dropDownWidth is set to 300

height Number/String null

Sets or gets the jqxTextArea's height.

Code examples

Set the height property.

$('#jqxTextArea').jqxTextArea({ height: 35 });

Get the height property.

var height = $('#jqxTextArea').jqxTextArea('height');

Try it: height is set to 100

items Number 8

Sets or gets the maximum number of items to display in the popup menu.

Code example

Set the items property.

$("#jqxTextArea").jqxTextArea({ items: 10 });

Get the items property.

var items = $('#jqxTextArea').jqxTextArea('items');

Try it: items is set to 10

maxLength Number null

Sets or gets the maximum character length of the textarea.

Code example

Set the maxLength property.

$("#jqxTextArea").jqxTextArea({ maxLength: 10 });

Get the maxLength property.

var maxLength = $('#jqxTextArea').jqxTextArea('maxLength');

Try it: maxLength is set to 10

minLength Number 1

Sets or gets the minimum character length needed before triggering auto-complete suggestions.

Code example

Set the minLength property.

$("#jqxTextArea").jqxTextArea({ minLength: 2 });

Get the minLength property.

var minLength = $('#jqxTextArea').jqxTextArea('minLength');

Try it: minLength is set to 1

opened Boolean false

Gets a value indicating whether the auto-suggest popup is opened.

Code example

Get the opened property.

var opened = $('#jqxTextArea').jqxTextArea('opened');

Try it: get the value of opened

placeHolder String ''

Sets or gets the textarea's placeholder.

Code example

Set the placeHolder property.

$("#jqxTextArea").jqxTextArea({ placeHolder: "Enter text" });

Get the placeHolder property.

var placeHolder = $('#jqxTextArea').jqxTextArea('placeHolder');

Try it: placeHolder is set to "Enter Your Country of Origin"

popupZIndex Number 20000

Sets or gets the auto-suggest popup's z-index.

Code example

Set the popupZIndex property.

$("#jqxTextArea").jqxTextArea({ popupZIndex: 999999 });

Get the popupZIndex property.

var zIndex = $('#jqxTextArea').jqxTextArea('popupZIndex');

Try it: popupZIndex is set to 99999

query String ''

Determines the textarea's query.

Code example

Set the query property.

$("#jqxTextArea").jqxTextArea({ query: "un" });

Get the query property.

var query = $("#jqxTextArea").jqxTextArea('query');

Try it: query is set to item

renderer function null

Enables you to update the textarea's value, after a selection from the auto-complete popup.

Code example

Set the renderer property.


var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
$("#jqxTextArea").jqxTextArea({ placeHolder: "Enter a Country", height: 25, width: 250, 
    source: function (query, response) {
        var item = query.split(/,\s*/).pop();
        // update the search query.
        $("#jqxTextArea").jqxTextArea({ query: item });
        response(countries);
    },
    renderer: function (itemValue, inputValue) {
        var terms = inputValue.split(/,\s*/);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(itemValue);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        var value = terms.join(", ");
        return value;
    }
});

Try it: renderer is set to a custom function

roundedCorners Boolean true

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

Code example

Set the roundedCorners property.

$("#jqxTextArea").jqxTextArea({ roundedCorners: false });

Get the roundedCorners property.

var roundedCorners = $('#jqxTextArea').jqxTextArea('roundedCorners');

Try it: roundedCorners is set to false

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxTextArea').jqxTextArea({ rtl : true });

Get the rtl property.

var rtl = $('#jqxTextArea').jqxTextArea('rtl');

Try it: rtl is set to true

scrollBarSize Number 15

Sets or gets the size of the scrollbar.

Code examples

Set the scrollBarSize property.

$('#jqxTextArea').jqxTextArea({ scrollBarSize: 20 });

Get the scrollBarSize property.

var scrollBarSize = $('#jqxTextArea').jqxTextArea('scrollBarSize');

Try it: scrollBarSize is set to 20

searchMode String 'default'

Sets or gets the search mode. When the user types into the textarea, the widget tries to find the searched item using the entered text and the selected search mode.

Possible Values:

'none'

'contains'

'containsignorecase'

'equals'

'equalsignorecase'

'startswithignorecase'

'startswith'

'endswithignorecase'

'endswith'

Code example

Set the searchMode property .

$("#jqxTextArea").jqxTextArea({ searchMode: 'contains' });

Get the searchMode property.

var searchMode = $('#jqxTextArea').jqxTextArea('searchMode');

Try it: searchMode is set to 'containsignorecase'

source Array, function []

Sets the widget's data source. The 'source' function is passed two arguments, the textarea's value and a callback function. The 'source' function may be used synchronously by returning an array of items or asynchronously via the callback.

Code example

Initialize a jqxTextArea with the source property specified.


var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
$("#jqxTextArea").jqxTextArea({ placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1,  source: countries });

Try it: source is set to a custom array

theme String ''

valueMember String ''

Sets or gets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property.

Code example

Set the valueMember property.

$("#jqxTextArea").jqxTextArea({ valueMember: 'lastName' });

Get the valueMember property.

var valueMember = $('#jqxTextArea').jqxTextArea('valueMember');

Try it: valueMember is set to "CompanyName"

width Number/String null

Sets or gets the jqxTextArea's width.

Code examples

Set the width property.

$('#jqxTextArea').jqxTextArea({ width: 200 });

Get the width property.

var width = $('#jqxTextArea').jqxTextArea('width');

Try it: width is set to 150

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event by type: jqxTextArea.


$('#jqxTextArea').on('change', function(event) {
    var value = $('#jqxTextArea').val();
    var type = event.args.type; // keyboard, mouse or null depending on how the value was changed.
});

Try it: Bind to the change event by type: jqxTextArea.

close Event

This event is triggered when the auto-suggest popup is closed.

Code examples

Bind to the close event by type: jqxTextArea.

$('#jqxTextArea').on('close', function (event) {
    var popup = event.args.popup;
});

Try it: Bind to the close event by type: jqxTextArea.

open Event

This event is triggered when the auto-suggest popup is opened.

Code examples

Bind to the open event by type: jqxTextArea.

$('#jqxTextArea').on('open', function (event) {
    var popup = event.args.popup;
});

Try it: Bind to the open event by type: jqxTextArea.

select Event

This event is triggered when an item is selected from the auto-suggest popup.

Code examples

Bind to the select event by type: jqxTextArea.

$('#jqxTextArea').on('select', function (event) {
    if (event.args) {
        var item = event.args.item;
        var label = item.label;
        var value = item.value;
    }
});

Try it: Bind to the select event by type: jqxTextArea.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxTextArea').jqxTextArea('destroy');

Try it: destroys the jqxTextArea

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

$('#jqxTextArea').jqxTextArea('focus');

Try it: focuses the jqxTextArea

refresh Method

Refreshes the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$('#jqxTextArea').jqxTextArea('refresh');

Try it: refreshes the jqxTextArea

render Method

Renders the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

$('#jqxTextArea').jqxTextArea('render');

Try it: renders the jqxTextArea

selectAll Method

Selects the text in the textarea.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the selectAll method.

$('#jqxTextArea').jqxTextArea('selectAll');

Try it: selects all of the items in the jqxTextArea

val Method

Sets or gets the value.

Parameter	Type	Description
value	String

Return Value
String

Code examples

Get the value:

var value = $('#jqxTextArea').jqxTextArea('val'); or var value = $('#jqxTextArea').val();

Set the value:

$('#jqxTextArea').jqxTextArea('val', 'New Value'); or $('#jqxTextArea').val('New Value');

Try it: sets the jqxTextArea value

$('#jqxTextArea').jqxTextArea('val', {label: "Item 1", value: "1"});

Properties

Code examples

Code example

Code examples

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code examples

Code example

Code example

Code example

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples