Properties

NameTypeDefault
disabled boolean false

Enables or disables the jqxInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dropDownWidth number | string null

Sets or gets the jqxInput's dropDown width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} dropDownWidth={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
displayMember string ""

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

height string | number null

Sets or gets the jqxInput's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
items number 8

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} items={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
minLength number 1

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} minLength={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
maxLength number null

Sets or gets the maximum character length of the input. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} maxLength={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
opened boolean false

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

Sets or gets the input's place holder. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
popupZIndex number 20000

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} popupZIndex={99999}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
query string ""

Determines the input's query.

renderer (itemValue?: string, inputValue?: string) => string null

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

rtl boolean false

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
searchMode InputSearchMode 'default'
InputSearchMode: "none" | "contains" | "containsignorecase" | "equals" | "equalsignorecase" | "startswithignorecase" | "startswith" | "endswithignorecase" | "endswith"

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'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} searchMode={'startswithignorecase'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
source any []

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. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
valueMember string ""

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

width string | number null

Sets or gets the jqxInput's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value number | string null 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source} value={'Brazil'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} onChange={this.onChange} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
close Event

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

Code examples

Bind to the close event of jqxInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} onClose={this.onClose} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
open Event

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

Code examples

Bind to the open event of jqxInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} onOpen={this.onOpen} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
select Event

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

Code examples

Bind to the select event of jqxInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
  
  public render() {
    return (
      <JqxInput ref={this.myInput} onSelect={this.onSelect} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
 
  private onSelect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
destroy None

Destroys the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myInput.current!.destroy();
  }
   
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
focus None

Focuses the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myInput.current!.focus();
  }
   
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
selectAll None

Selects the text in the input field. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myInput.current!.selectAll();
  }
   
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
val value

Sets or gets the value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
 
class App extends React.PureComponent<{}, IInputProps> {
  private myInput = React.createRef<JqxInput>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myInput.current!.val();
  }
   
  public render() {
    return (
      <JqxInput ref={this.myInput} 
        width={250} height={25} source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);