React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

ReactJS Input demo. The jqxInput widget provides suggestions while you type into the field. The suggestions in this sample are cities. The datasource is the geonames.org webservice. The city name ends up in the input after selecting an element, more info is displayed in the suggestions popup to help find the right entry.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS Input demo. The jqxInput widget provides suggestions while you type into the field. The suggestions in this sample are cities. The datasource is the geonames.org webservice. The city name ends up in the input after selecting an element, more info is displayed in the suggestions popup to help find the right entry.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        ReactJS Input demo. The jqxInput widget provides suggestions while you type into the field. The suggestions in this sample are cities. The datasource is the geonames.org webservice. The city name ends up in the input after selecting an element, more info is displayed in the suggestions popup to help find the right entry.
    </div>
    <div id="app"></div>
    <script src="../build/input_autocomplete.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxInput from '../../../jqwidgets-react/react_jqxinput.js';class App extends React.Component {
    render() {
        let source = (query, response) => {
            let dataAdapter = new $.jqx.dataAdapter
                (
                {
                    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'
                    }
                },
                {
                    autoBind: true,
                    formatData: (data) => {
                        data.name_startsWith = query;
                        return data;
                    },
                    loadComplete: (data) => {
                        if (data.geonames.length > 0) {
                            response($.map(data.geonames, (item) => {
                                return {
                                    label: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName,
                                    value: item.name
                                }
                            }));
                        }
                    }
                }
                );
        };
        return (
            <JqxInput
                width={200} height={25} source={source}
                minLength={1} placeHolder={'Enter a Country'}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));