Enables or disables the jqxTextArea.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :disabled="true"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :displayMember="displayMember"
    :source="source"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
      displayMember: 'ContactName',
        source: [{ 'CompanyName': 'Company1',  'ContactName': 'Ana' }, { 'CompanyName': 'Company2', 'ContactName': 'Maria' }]
      }
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :dropDownWidth="dropDownWidth"
    :source="source"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
      dropDownWidth: 300,
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
      }
    }
  }
</script>

Sets or gets the jqxTextArea's height.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :items="items"
    :source="source"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
      items: 3,
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
      }
    }
  }
</script>

Sets or gets the maximum character length of the textarea.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :maxLength="10"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :minLength="2"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" />
</template>
 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      let opened = this.$refs.myTextArea.opened;
      alert('Opened: ' + opened);
    }
  }
</script>

Sets or gets the textarea's placeholder.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :popupZIndex="popupZIndex"
    :source="source"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
      popupZIndex: 99999,
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
      }
    }
  }
</script>

Determines the textarea's query.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :source="source"
    :placeHolder="'Enter a Country'" :renderer="renderer" />
</template>
 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
        countries: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria']
      }
    },
    methods: {
      source: function (query, response) {
        const item = query.split(/,\s*/).pop();
        // update the search query.
        this.$refs.myTextArea.query = item;
        response(this.countries);
      },
      renderer: function (itemValue, inputValue) {
        const 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('');
 
        return terms.join(', ');
      }
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :source="source"
    :placeHolder="'Enter a Country'" :renderer="renderer" />
</template>
 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
        countries: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria']
      }
    },
    methods: {
      source: function (query, response) {
        const item = query.split(/,\s*/).pop();
        // update the search query.
        this.$refs.myTextArea.query = item;
        response(this.countries);
      },
      renderer: function (itemValue, inputValue) {
        const 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('');
 
        return terms.join(', ');
      }
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :roundedCorners="true"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :rtl="true"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

Sets or gets the size of the scrollbar.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :scrollBarSize="15"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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'

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :searchMode="searchMode"
    :source="source"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
      searchMode: 'containsignorecase',
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
      }
    }
  }
</script>

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.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :source="source"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    methods: {
      source: function () {
        return [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
      }
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :theme="'material'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

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.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'" :valueMember="valueMember"
    :source="source" :displayMember="'ContactName'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    data: function () {
      return {
      valueMember: 'CompanyName',
        source: [{ 'CompanyName': 'Company1',  'ContactName': 'Ana' }, { 'CompanyName': 'Company2', 'ContactName': 'Maria' }]
      }
    }
  }
</script>

Sets or gets the jqxTextArea's width.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    }
  }
</script>

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxTextArea.

<template>
    <JqxTextArea ref="myTextArea"  @open="open($event)" @change="change($event)" @select="select($event)"  @close="close($event)"
        :width="200" :height="50" :placeHolder="'Enter a Country'" :source="source" 
     />
</template>

<script>
    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';

    export default {
        components: {
            JqxTextArea
        },
        data: function () {
            return {
                source: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria']
            }
        },
        methods: {
            open: function (event) {
                alert('open');
            },
            change: function (event) {
                alert('change');
            },
            select: function (event) {
                alert('select');
            }, close: function (event) {
                alert('close');
            }
        }
    }
</script>

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

Code examples

Bind to the close event of jqxTextArea.

<template>
    <JqxTextArea ref="myTextArea"  @open="open($event)" @change="change($event)" @select="select($event)"  @close="close($event)"
        :width="200" :height="50" :placeHolder="'Enter a Country'" :source="source" 
     />
</template>

<script>
    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';

    export default {
        components: {
            JqxTextArea
        },
        data: function () {
            return {
                source: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria']
            }
        },
        methods: {
            open: function (event) {
                alert('open');
            },
            change: function (event) {
                alert('change');
            },
            select: function (event) {
                alert('select');
            }, close: function (event) {
                alert('close');
            }
        }
    }
</script>

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

Code examples

Bind to the open event of jqxTextArea.

<template>
    <JqxTextArea ref="myTextArea"  @open="open($event)" @change="change($event)" @select="select($event)"  @close="close($event)"
        :width="200" :height="50" :placeHolder="'Enter a Country'" :source="source" 
     />
</template>

<script>
    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';

    export default {
        components: {
            JqxTextArea
        },
        data: function () {
            return {
                source: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria']
            }
        },
        methods: {
            open: function (event) {
                alert('open');
            },
            change: function (event) {
                alert('change');
            },
            select: function (event) {
                alert('select');
            }, close: function (event) {
                alert('close');
            }
        }
    }
</script>

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

Code examples

Bind to the select event of jqxTextArea.

<template>
    <JqxTextArea ref="myTextArea"  @open="open($event)" @change="change($event)" @select="select($event)"  @close="close($event)"
        :width="200" :height="50" :placeHolder="'Enter a Country'" :source="source" 
     />
</template>

<script>
    import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';

    export default {
        components: {
            JqxTextArea
        },
        data: function () {
            return {
                source: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria']
            }
        },
        methods: {
            open: function (event) {
                alert('open');
            },
            change: function (event) {
                alert('change');
            },
            select: function (event) {
                alert('select');
            }, close: function (event) {
                alert('close');
            }
        }
    }
</script>

Destroys the widget.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      this.$refs.myTextArea.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      this.$refs.myTextArea.focus();
    }
  }
</script>

Refreshes the widget.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      this.$refs.myTextArea.refresh();
    }
  }
</script>

Renders the widget.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      this.$refs.myTextArea.render();
    }
  }
</script>

Selects the text in the textarea.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      this.$refs.myTextArea.selectAll();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxTextArea ref="myTextArea"
    :width="200" :height="50" :placeHolder="'Enter a Country'"
  />
</template>

 
<script>
  import JqxTextArea from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtextarea.vue';
 
  export default {
    components: {
      JqxTextArea
    },
    mounted: function () {
      const value = this.$refs.myTextArea.val();
    }
  }
</script>