Enables or disables the jqxInput.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :disabled="true"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

Sets or gets the jqxInput's dropDown width.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :dropDownWidth="200"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</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>
  <JqxInput ref="myInput"
       :width="250" :height="25" :source="source" :displayMember="'ContactName'"/>
</template>
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return {
        source: [
          { "CompanyName": "Company 1", "ContactName": "Ana" },
          { "CompanyName": "Company 2", "ContactName": "Maria" }
        ]
      }
    }
  }
</script>

Sets or gets the jqxInput's height.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

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

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :items="10"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

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

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :minLength="2"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

Sets or gets the maximum character length of the input.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :maxLength="10"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

Sets or gets a value indicating whether the auto-suggest popup is opened.

<template>
  <JqxInput ref="myInput"
       :width="250" :height="25" :source="source"/>
</template>
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return {
        source: [
          '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'
        ]
      }
    },
    mounted: function () {
      let opened = this.$refs.myInput.opened;
      alert('Opened: ' + opened);
    }
  }
</script>

Get the opened property.

let opened = this.$refs.myInput.opened;

Sets or gets the input's place holder.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :placeHolder="'Enter a Country'"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

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

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :popupZIndex="99999"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

Determines the input's query.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
    :placeHolder="'Enter a Country'" :renderer="renderer" />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    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.myInput.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 input's value, after a selection from the auto-complete popup.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
    :placeHolder="'Enter a Country'" :renderer="renderer" />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    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.myInput.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>

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

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :rtl="true"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

Sets or gets the search mode. When the user types into the edit field, the jqxInput 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>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :searchMode="'startswithignorecase'"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

Sets the widget's data source. The 'source' function is passed two arguments, the input field'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>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</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>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :theme="'material'"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</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>
  <JqxInput ref="myInput"
       :width="250" :height="25" :source="source" :displayMember="'ContactName'" :valueMember="'CompanyName'"/>
</template>
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return {
        source: [
          { "CompanyName": "Company 1", "ContactName": "Ana" },
          { "CompanyName": "Company 2", "ContactName": "Maria" }
        ]
      }
    }
  }
</script>

Sets or gets the jqxInput's width.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source" :value="'Brazil'"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    }
  }
</script>

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxInput.

<template>
  <JqxInput ref="myInput" @change="onChange($event)"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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

Code examples

Bind to the close event of jqxInput.

<template>
  <JqxInput ref="myInput" @close="onClose($event)"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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

Code examples

Bind to the open event of jqxInput.

<template>
  <JqxInput ref="myInput" @open="onOpen($event)"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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

Code examples

Bind to the select event of jqxInput.

<template>
  <JqxInput ref="myInput" @select="onSelect($event)"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    methods: {
      onSelect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    mounted: function () {
      this.$refs.myInput.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    mounted: function () {
      this.$refs.myInput.focus();
    }
  }
</script>

Selects the text in the input field.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    mounted: function () {
      this.$refs.myInput.value = 'text';
      this.$refs.myInput.selectAll();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxInput ref="myInput"
    :width="250" :height="25" :source="source"
  />
</template>
 
<script>
  import JqxInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.vue';
 
  export default {
    components: {
      JqxInput
    },
    data: function () {
      return  {
        source: [
          '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'
        ]
      }
    },
    mounted: function () {
      this.$refs.myInput.value = 'text';
      const value = this.$refs.myInput.val();
    }
  }
</script>