Sets the type of the animation.

'fade'

'slide'

'none'

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :animationType="'fade'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the animationType property.

let animationType = this.$refs.myComboBox.animationType;

Sets or gets the whether the 'autoComplete' feature is enabled or disabled. When this feature is enabled, the jqxComboBox displays in the popup listbox, only the items that match the searched text.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :autoComplete="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the autoComplete property.

let autoComplete = this.$refs.myComboBox.autoComplete;

Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :autoOpen="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the autoOpen property.

let autoOpen = this.$refs.myComboBox.autoOpen;

Sets or gets whether items will wrap when they reach the width of the dropDown.

<template>
  <JqxComboBox ref="myComboBox"
    :width="100" :height="25" :source="source" :selectedIndex="4" :autoItemsHeight="true"
    :dropDownHeight="250"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the autoItemsHeight property.

let autoItemsHeight = this.$refs.myComboBox.autoItemsHeight;

Sets or gets whether the height of the jqxComboBox's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :autoDropDownHeight="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the autoDropDownHeight property.

let autoDropDownHeight = this.$refs.myComboBox.autoDropDownHeight;

Sets the delay of the 'close' animation.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :closeDelay="2000"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the closeDelay property.

let closeDelay = this.$refs.myComboBox.closeDelay;

Determines whether checkboxes will be displayed next to the list items.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the checkboxes property.

let checkboxes = this.$refs.myComboBox.checkboxes;

Enables/disables the jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :disabled="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myComboBox.disabled;

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>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :displayMember="'text'" :valueMember="'value'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          { text: "Affogato", value: 0 }, 
          { text: "Americano", value: 1 }, 
          { text: "Bicerin", value: 2 }, 
          { text: "Breve", value: 3 }, 
          { text: "Cafe Bombon", value: 4 }, 
          { text: "Cafe au lait", value: 5 }, 
          { text: "Caffe Corretto", value: 6 }, 
          { text: "Cafe Crema", value: 7 }, 
          { text: "Caffe Latte", value: 8 }
        ]
      }
    }
  }
</script>

Get the displayMember property.

let displayMember = this.$refs.myComboBox.displayMember;

Sets or gets the DropDown's alignment.

'left'

'right'

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownWidth="340"
    :dropDownHorizontalAlignment="'left'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the dropDownHorizontalAlignment property.

let dropDownHorizontalAlignment = this.$refs.myComboBox.dropDownHorizontalAlignment;

Sets or gets the DropDown's alignment.

'top'

'bottom'

<template>
<div style="margin-top: 250px;">
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownVerticalAlignment="'top'"
  />
  </div>
</template>
 
<script>
  import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
  export default {
    components: {
      JqxComboBox
    },
    data: function() {
      return {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cappuccino",
          "Espresso",
          "Frappuccino",
          "Iced Coffee",
          "Irish coffee",
          "Liqueur coffee"
        ]
      };
    }
  };
</script>

Get the dropDownVerticalAlignment property.

let dropDownVerticalAlignment = this.$refs.myComboBox.dropDownVerticalAlignment;

Sets or gets the height of the jqxComboBox's ListBox displayed in the widget's DropDown.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownHeight="300"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the dropDownHeight property.

let dropDownHeight = this.$refs.myComboBox.dropDownHeight;

Sets or gets the width of the jqxComboBox's ListBox displayed in the widget's DropDown.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :dropDownWidth="300"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the dropDownWidth property.

let dropDownWidth = this.$refs.myComboBox.dropDownWidth;

Enables/disables the hover state.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :enableHover="false"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the enableHover property.

let enableHover = this.$refs.myComboBox.enableHover;

Enables/disables the selection.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :enableSelection="false"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the enableSelection property.

let enableSelection = this.$refs.myComboBox.enableSelection;

Sets or gets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :enableBrowserBoundsDetection="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the enableBrowserBoundsDetection property.

let enableBrowserBoundsDetection = this.$refs.myComboBox.enableBrowserBoundsDetection;

Sets or gets the jqxComboBox height.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the height property.

let height = this.$refs.myComboBox.height;

Sets or gets the height of the jqxComboBox Items. When the itemHeight == - 1, each item's height is equal to its desired height.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :itemHeight="25"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the itemHeight property.

let itemHeight = this.$refs.myComboBox.itemHeight;

Determines whether the jqxComboBox is in multi-select mode.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :multiSelect="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the multiSelect property.

let multiSelect = this.$refs.myComboBox.multiSelect;

Determines the minimum number of characters that need to be entered by the user for search in remote data source when remoteAutoComplete property is set to true.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :minLength="2"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the minLength property.

let minLength = this.$refs.myComboBox.minLength;

Sets or gets the delay of the 'open' animation.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :openDelay="2000"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the openDelay property.

let openDelay = this.$refs.myComboBox.openDelay;

Sets or gets the popup's z-index.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :popupZIndex="2000"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the popupZIndex property.

let popupZIndex = this.$refs.myComboBox.popupZIndex;

Sets or gets the input field's place holder.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="-1" :placeHolder="'Please type an item'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the placeHolder property.

let placeHolder = this.$refs.myComboBox.placeHolder;

Determines whether the items displayed in the popup come from a remote data source. When this property is set to true, the jqxComboBox calls the 'search' callback function when the user types into the input field.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25"
    :source="dataAdapter"
    :selectedIndex="-1"
    :remoteAutoComplete="true"
    :search="search"
    :displayMember="'name'"
    :valueMember="'countryName'"
    />
</template>
<script>
    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
    export default {
    components: {
        JqxComboBox
    },
    data: function() {
        return {
        dataAdapter: new jqx.dataAdapter(this.source, {
            formatData: (data) => {
            if (this.$refs.myComboBox.searchString() != undefined) {
                data.name_startsWith = this.$refs.myComboBox.searchString();
                return data;
            }
            }
        }),
        search: () => {
            this.dataAdapter.dataBind();      
        }
        };
    },
    beforeCreate: function() {
        this.test = 'test2';
        this.source = {
        datatype: "jsonp",
        datafields: [
            {
            name: "countryName"
            },
            {
            name: "name"
            },
            {
            name: "population",
            type: "float"
            },
            {
            name: "continentCode"
            },
            {
            name: "adminName1"
            }
        ],
        url: "http://api.geonames.org/searchJSON",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            username: "jqwidgets"
        }
        };
    }
    };
</script>

Get the remoteAutoComplete property.

let remoteAutoComplete = this.$refs.myComboBox.remoteAutoComplete;

Determines the delay between two keystrokes. The search callback function is called on timeout. The value is specified in milliseconds.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25"
    :source="dataAdapter"
    :selectedIndex="-1"
    :remoteAutoComplete="true"
    :search="search"
    :displayMember="'name'"
    :valueMember="'countryName'"
    :remoteAutoCompleteDelay="200"
  />
</template>
<script>
    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
    export default {
    components: {
        JqxComboBox
    },
    data: function() {
        return {
        dataAdapter: new jqx.dataAdapter(this.source, {
            formatData: (data) => {
            if (this.$refs.myComboBox.searchString() != undefined) {
                data.name_startsWith = this.$refs.myComboBox.searchString();
                return data;
            }
            }
        }),
        search: () => {
            this.dataAdapter.dataBind();      
        }
        };
    },
    beforeCreate: function() {
        this.test = 'test2';
        this.source = {
        datatype: "jsonp",
        datafields: [
            {
            name: "countryName"
            },
            {
            name: "name"
            },
            {
            name: "population",
            type: "float"
            },
            {
            name: "continentCode"
            },
            {
            name: "adminName1"
            }
        ],
        url: "http://api.geonames.org/searchJSON",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            username: "jqwidgets"
        }
        };
    }
    };
</script>

Get the remoteAutoCompleteDelay property.

let remoteAutoCompleteDelay = this.$refs.myComboBox.remoteAutoCompleteDelay;

Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" 
    :source="source"
    :renderer="renderer"
    :selectedIndex="-1" 
    :displayMember="'text'" 
    :valueMember="'value'"
  />
</template>
 
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        { text: "Affogato", value: 0 },
        { text: "Americano", value: 1 },
        { text: "Bicerin", value: 2 },
        { text: "Breve", value: 3 },
        { text: "Cafe Bombon", value: 4 },
        { text: "Cafe au lait", value: 5 },
        { text: "Caffe Corretto", value: 6 },
        { text: "Cafe Crema", value: 7 },
        { text: "Caffe Latte", value: 8 }
      ],
      renderer: function(index, label, value) {
        if (index != null) {
          let textInfo =
            'index: ' + index + ", label: " + label + ", value: " + value;
          return textInfo;
        }
        return "";
      }
    };
  }
};
</script>

Get the renderer property.

let renderer = this.$refs.myComboBox.renderer;

Callback function which is called when the selected item is rendered. By using the renderSelectedItem function, you can customize the displayed text in the ComboBox's input field.

<template>
<JqxComboBox ref="myComboBox"
  :width="200" :height="25" 
  :source="source"
  :renderSelectedItem="renderSelectedItem"
  :selectedIndex="4" 
  :displayMember="'text'" 
  :valueMember="'value'"
/>
</template>
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        { text: "Affogato", value: 0 },
        { text: "Americano", value: 1 },
        { text: "Bicerin", value: 2 },
        { text: "Breve", value: 3 },
        { text: "Cafe Bombon", value: 4 },
        { text: "Cafe au lait", value: 5 },
        { text: "Caffe Corretto", value: 6 },
        { text: "Cafe Crema", value: 7 },
        { text: "Caffe Latte", value: 8 }
      ],
      renderSelectedItem: function(index, item) {
        if (item != null) {
          let textInfo = "index: " + index + ", " + item.label;
          return textInfo;
        }
        return "";
      }
    };
  }
};
</script>

Get the renderSelectedItem property.

let renderSelectedItem = this.$refs.myComboBox.renderSelectedItem;

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

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :rtl="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myComboBox.rtl;

Sets or gets the selected index.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="0"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the selectedIndex property.

let selectedIndex = this.$refs.myComboBox.selectedIndex;

Determines whether the jqxComboBox shows its dropdown button.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :showArrow="false"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the showArrow property.

let showArrow = this.$refs.myComboBox.showArrow;

Determines whether the jqxComboBox shows the items close buttons in multi-select mode.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :showCloseButtons="false" :multiSelect="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.selectItem('Breve');
      this.$refs.myComboBox.selectItem('Americano');
    } 
  }
</script>

Get the showCloseButtons property.

let showCloseButtons = this.$refs.myComboBox.showCloseButtons;

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

'none'

'contains'

'containsignorecase'

'equals'

'equalsignorecase'

'startswithignorecase'

'startswith'

'endswithignorecase'

'endswith'

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="-1" :searchMode="'contains'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the searchMode property.

let searchMode = this.$refs.myComboBox.searchMode;

Callback function which is called when the 'remoteAutoComplate' property is set to true and the user types into the ComboBox's input field.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25"
    :source="dataAdapter"
    :selectedIndex="-1"
    :remoteAutoComplete="true"
    :search="search"
    :displayMember="'name'"
    :valueMember="'countryName'"
    :remoteAutoCompleteDelay="200"
  />
</template>
<script>
    import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
    export default {
    components: {
        JqxComboBox
    },
    data: function() {
        return {
        dataAdapter: new jqx.dataAdapter(this.source, {
            formatData: (data) => {
            if (this.$refs.myComboBox.searchString() != undefined) {
                data.name_startsWith = this.$refs.myComboBox.searchString();
                return data;
            }
            }
        }),
        search: () => {
            this.dataAdapter.dataBind();      
        }
        };
    },
    beforeCreate: function() {
        this.test = 'test2';
        this.source = {
        datatype: "jsonp",
        datafields: [
            {
            name: "countryName"
            },
            {
            name: "name"
            },
            {
            name: "population",
            type: "float"
            },
            {
            name: "continentCode"
            },
            {
            name: "adminName1"
            }
        ],
        url: "http://api.geonames.org/searchJSON",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            username: "jqwidgets"
        }
        };
    }
    };
</script>

Get the search property.

let search = this.$refs.myComboBox.search;

Sets or gets the items source.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the source property.

let source = this.$refs.myComboBox.source;

Sets or gets the scrollbars size.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :scrollBarSize="10"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the scrollBarSize property.

let scrollBarSize = this.$refs.myComboBox.scrollBarSize;

Determines the button's template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :template="'success'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the template property.

let template = this.$refs.myComboBox.template;

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>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :theme="'material'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the theme property.

let theme = this.$refs.myComboBox.theme;

Determines whether an item can be selected in multi-select mode.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :validateSelection="validateSelection"
    :multiSelect="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      validateSelection: function (itemValue) {
        return itemValue === 'Breve';
      }
    }
  }
</script>

Get the validateSelection property.

let validateSelection = this.$refs.myComboBox.validateSelection;

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>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :displayMember="'text'" :valueMember="'value'"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          { text: "Affogato", value: 0 }, 
          { text: "Americano", value: 1 }, 
          { text: "Bicerin", value: 2 }, 
          { text: "Breve", value: 3 }, 
          { text: "Cafe Bombon", value: 4 }, 
          { text: "Cafe au lait", value: 5 }, 
          { text: "Caffe Corretto", value: 6 }, 
          { text: "Cafe Crema", value: 7 }, 
          { text: "Caffe Latte", value: 8 }
        ]
      }
    }
  }
</script>

Get the valueMember property.

let valueMember = this.$refs.myComboBox.valueMember;

Sets or gets the jqxComboBox's width.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    }
  }
</script>

Get the width property.

let width = this.$refs.myComboBox.width;

This event is triggered when the data binding operation is completed.

Code examples

Bind to the bindingComplete event of jqxComboBox.

<template>
    <JqxComboBox ref="myComboBox" @bindingComplete="onBindingComplete($event)"
                 :width="200" :height="25" :selectedIndex="4" />
</template>
<script>
    import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
    export default {
        components: {
            JqxComboBox
        },
        data: function () {
            return {
                source: [
                    'Affogato',
                    'Americano',
                    'Bicerin',
                    'Breve',
                    'Cappuccino',
                    'Espresso',
                    'Frappuccino',
                    'Iced Coffee',
                    'Irish coffee',
                    'Liqueur coffee'
                ]
            }
        },
        mounted: function () {
            this.$refs.myComboBox.source = this.source;
        },
        methods: {
            onBindingComplete: function (event) {
                alert('do something...');
            }
        }
    }
</script>

This event is triggered when an item is checked/unchecked.

Code examples

Bind to the checkChange event of jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox" @checkChange="onCheckChange($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.checkboxes = true;
    },
    methods: {
      onCheckChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox" @close="onClose($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox" @change="onChange($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox" @open="onOpen($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox" @select="onSelect($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onSelect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxComboBox.

<template>
  <JqxComboBox ref="myComboBox" @unselect="onUnselect($event)"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    methods: {
      onUnselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds a new item to the jqxComboBox. Returns 'true', if the new item is added or 'false' if the item is not added.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.addItem('item');
    }
  }
</script>

Clears all selected items.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.clearSelection();
    }
  }
</script>

Clears all items.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.clear();
    }
  }
</script>

Hides the popup listbox.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Cappuccino",
        "Espresso",
        "Frappuccino",
        "Iced Coffee",
        "Irish coffee",
        "Liqueur coffee"
      ]
    };
  },
  mounted: function() {
    this.$refs.myComboBox.open();
    setTimeout(() => {
      this.$refs.myComboBox.close();
    }, 1000);
  }
};
</script>

Checks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to check the first item, the 'checkIndex' method should be called with parameter 0.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.checkboxes = true;
      this.$refs.myComboBox.checkIndex(0);
    }
  }
</script>

Checks an item.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.checkboxes = true;
      this.$refs.myComboBox.checkItem('Affogato');
    }
  }
</script>

Checks all list items when the 'checkboxes' property value is true.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.checkboxes = true;
      this.$refs.myComboBox.checkAll();
    }
  }
</script>

Destroys the widget.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.destroy();
    }
  }
</script>

Disables an item. Item is an object.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.disableItem('Affogato');
    }
  }
</script>

Disables an item by index. Index is a number.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.disableAt(0);
    }
  }
</script>

Enables an item. Item is an object.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Cappuccino",
        "Espresso",
        "Frappuccino",
        "Iced Coffee",
        "Irish coffee",
        "Liqueur coffee"
      ]
    };
  },
  mounted: function() {
    this.$refs.myComboBox.disableAt(0);
    this.$refs.myComboBox.open();
    setTimeout(() => {
      this.$refs.myComboBox.enableItem("Affogato");
    }, 1000);
  }
};
</script>

Enables a disabled item by index. Index is a number.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Cappuccino",
        "Espresso",
        "Frappuccino",
        "Iced Coffee",
        "Irish coffee",
        "Liqueur coffee"
      ]
    };
  },
  mounted: function() {
    this.$refs.myComboBox.disableAt(0);
    this.$refs.myComboBox.open();
    setTimeout(() => {
      this.$refs.myComboBox.enableAt(0);
    }, 1000);
  }
};
</script>

Ensures that an item is visible. index is number. When necessary, the jqxComboBox scrolls to the item to make it visible.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.ensureVisible(9);
    }
  }
</script>

Sets the focus to the widget.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.focus();
    }
  }
</script>

Gets item by index. The returned value is an object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.getItem(0);
    }
  }
</script>

Gets an item by its value. The returned value is an object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.getItemByValue('Cappuccino');
    }
  }
</script>

Gets all items displayed in the ComboBox. The method could be useful for getting the currently visible items after auto complete. The returned value is an array of Items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.getVisibleItems();
    }
  }
</script>

Gets all items. The returned value is an array of Items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.getItems();
    }
  }
</script>

Gets the checked items. The returned value is an array of Items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :checkboxes="true"
  />
</template>
 
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Cappuccino",
        "Espresso",
        "Frappuccino",
        "Iced Coffee",
        "Irish coffee",
        "Liqueur coffee"
      ]
    };
  },
  mounted: function() {
    this.$refs.myComboBox.checkIndex(0);
    const value = this.$refs.myComboBox.getCheckedItems();
    console.log(value);
  }
};
</script>

Gets the selected item. The returned value is an object or null(if there is no selected item).

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.getSelectedItem();
    }
  }
</script>

Gets the selected items when "multiselect" is turned on. The returned value is an Array with objects.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :multiSelect="true"
  />
</template>
 
<script>
import JqxComboBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue";
export default {
  components: {
    JqxComboBox
  },
  data: function() {
    return {
      source: [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Cappuccino",
        "Espresso",
        "Frappuccino",
        "Iced Coffee",
        "Irish coffee",
        "Liqueur coffee"
      ]
    };
  },
  mounted: function() {
    this.$refs.myComboBox.selectItem("Affogato");
    this.$refs.myComboBox.selectItem("Breve");
    const value = this.$refs.myComboBox.getSelectedItems();
    console.log(value);
  }
};
</script>

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.getSelectedIndex();
    }
  }
</script>

Inserts a new item to the jqxComboBox. Returns 'true', if the new item is inserted or false if the insertaion fails. The first parameter is object or string - the new item. The second parameter is number - the item's index.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.insertAt('Item1',0);
    }
  }
</script>

Returns true, if the popup is opened. Otherwise returns false.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.isOpened();
    }
  }
</script>

Indeterminates a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to indeterminate the first item, the 'indeterminateIndex' method should be called with parameter 0.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.indeterminateIndex(0);
    }
  }
</script>

Indeterminates an item.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.indeterminateItem('Affogato', 0);
    }
  }
</script>

Loads list items from a 'select' tag.

<template>
  <div>
    <JqxComboBox ref="myComboBox"
      :width="200" :height="25"
    />
    <br/>
    <select style='height: 25px; width: 200px;' id='select'>
        <option>Affogato</option>
        <option>Americano</option>
        <option>Bicerin</option>
        <option>Breve</option>
        <option>Caf� Bomb�n</option>
        <option>Caff� Corretto</option>
        <option>Caf� Crema</option>
        <option>Caff� Latte</option>
        <option>Caff� macchiato</option>
        <option>Caf� m�lange</option>
        <option>Coffee milk</option>
        <option>Cafe mocha</option>
        <option>Cappuccino</option>
        <option>Carajillo</option>
        <option>Cuban espresso</option>
        <option>Espresso</option>
        <option>The Flat White</option>
        <option>Frappuccino</option>
        <option>Galao</option>
        <option>Greek frappe coffee</option>
        <option>Iced Coffee</option>
        <option>Indian filter coffee</option>
        <option>Instant coffee</option>
        <option>Irish coffee</option>
        <option>Liqueur coffee</option>
    </select>
  </div>
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.loadFromSelect('select');
    }
  }
</script>

Shows the popup listbox.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.open();
    }
  }
</script>

Removes an item from the listbox. Parameter type: object returned by the "getItem" method or string - the value of an item. Returns 'true', if the item is removed or 'false', if the item is not removed.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.removeItem('Cappuccino');
    }
  }
</script>

Removes an item from the listbox. Parameter type: number - the index of the item. The method returns 'true', if the item is removed or 'false', if the item is not removed.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.removeAt(4);
    }
  }
</script>

Selects an item by index. The index is zero-based, i.e to select the first item, the 'selectIndex' method should be called with parameter 0.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.selectIndex(0);
    }
  }
</script>

Selects an item.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.selectItem('Affogato');
    }
  }
</script>

Method: searchString

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.searchString();
    }
  }
</script>

Updates an item. The first parameter is the new item. The second parameter could be an existing item or the value of an existing item.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.updateItem('New Item','Cappuccino');
    }
  }
</script>

Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.updateAt('Item1',0);
    }
  }
</script>

Unselects item by index. The index is zero-based, i.e to unselect the first item, the 'unselectIndex' method should be called with parameter 0.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.unselectIndex(4);
    }
  }
</script>

Unselects an item.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      this.$refs.myComboBox.unselectItem('Cappuccino');
    }
  }
</script>

Unchecks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to uncheck the first item, the 'uncheckIndex' method should be called with parameter 0.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      setTimeout(() => {
        this.$refs.myComboBox.uncheckIndex(0);
      }, 1000);
      this.$refs.myComboBox.checkAll();
    }
  }
</script>

Unchecks an item.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      setTimeout(() => {
        this.$refs.myComboBox.uncheckItem('Affogato');
      }, 1000);
      this.$refs.myComboBox.checkAll();
    }
  }
</script>

Unchecks all list items when the 'checkboxes' property value is true.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4" :checkboxes="true"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      setTimeout(() => {
        this.$refs.myComboBox.uncheckAll();  
      }, 1000);
      this.$refs.myComboBox.checkAll();
    }
  }
</script>

Sets or gets the selected value.

<template>
  <JqxComboBox ref="myComboBox"
    :width="200" :height="25" :source="source" :selectedIndex="4"
  />
</template>
 
<script>
  import JqxComboBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcombobox.vue';
 
  export default {
    components: {
      JqxComboBox
    },
    data: function () {
      return  {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
      }
    },
    mounted: function () {
      const value = this.$refs.myComboBox.val();
    }
  }
</script>