formname.xml

<fieldset addfieldpath="/administrator/components/com_componentname/models/fields">
 <field name="id" type="text" readonly="true" class="readonly" default="0" description="JGLOBAL_FIELD_ID_DESC"/>

 <field name="cat_id_01" type="categoryList" onchange="loadSubcategory(1)" label="Category 1" description="Category">
    <option value="">Please select</option>
 </field>
</fieldset>

edit.php

<?php echo $this->form->renderField('cat_id_01'); ?>

How it appears on localhost: it displays as select-box with category options. This is how I want it to be displayed.

models/fields/categoryList.php

    JFormHelper::loadFieldClass('list');

            /**
             * Supports an HTML select list of categories
             *
             * @since  1.6
             */
            class JFormFieldCategoryList extends JFormFieldList
            {
                /**
                 * The form field type.
                 *
                 * @var        string
                 * @since    1.6
                 */
                protected $type = 'categoryList';

                /**
                 * Method to get the field input markup.
                 *
                 * @return    string    The field input markup.
                 *
                 * @since    1.6
                 */
                public function getOptions()
                {
                    $categories[NULL] = 'Please Select';
                    $jinput = JFactory::getApplication()->input;
                    $db = JFactory::getDbo();
                    $query = 'SELECT id, title FROM `#__categories` WHERE parent_id IN (SELECT id from `#__categories` where title="'.$jinput->get('section').'")';
                    $rows = $db->setQuery($query)->loadObjectlist();
                    foreach ($rows as $row) {
                        $categories[$row->id] = $row->title;
                    }

                    return $categories;
                }

            }

How it appears on server: it displays as textbox and somehow the custom field is not working on server.

<div class="controls">
<input type="text" name="jform[cat_id_01]" id="jform_cat_id_01" value="110" list="jform_cat_id_01_datalist" onchange="loadSubcategory(1)"><datalist id="jform_cat_id_01_datalist"></datalist>
</div>

Joomla version: 3.6.5

formname.xml

<fieldset addfieldpath="/administrator/components/com_componentname/models/fields">
 <field name="id" type="text" readonly="true" class="readonly" default="0" description="JGLOBAL_FIELD_ID_DESC"/>

 <field name="cat_id_01" type="categoryList" onchange="loadSubcategory(1)" label="Category 1" description="Category">
    <option value="">Please select</option>
 </field>
</fieldset>

edit.php

<?php echo $this->form->renderField('cat_id_01'); ?>

How it appears on localhost: it displays as select-box with category options. This is how I want it to be displayed. php version: 7.0.0

models/fields/categoryList.php

    JFormHelper::loadFieldClass('list');

            /**
             * Supports an HTML select list of categories
             *
             * @since  1.6
             */
            class JFormFieldCategoryList extends JFormFieldList
            {
                /**
                 * The form field type.
                 *
                 * @var        string
                 * @since    1.6
                 */
                protected $type = 'categoryList';

                /**
                 * Method to get the field input markup.
                 *
                 * @return    string    The field input markup.
                 *
                 * @since    1.6
                 */
                public function getOptions()
                {
                    $categories[NULL] = 'Please Select';
                    $jinput = JFactory::getApplication()->input;
                    $db = JFactory::getDbo();
                    $query = 'SELECT id, title FROM `#__categories` WHERE parent_id IN (SELECT id from `#__categories` where title="'.$jinput->get('section').'")';
                    $rows = $db->setQuery($query)->loadObjectlist();
                    foreach ($rows as $row) {
                        $categories[$row->id] = $row->title;
                    }

                    return $categories;
                }

            }

How it appears on server: it displays as textbox and somehow the custom field is not working on server. php version: 7.0.17

<div class="controls">
<input type="text" name="jform[cat_id_01]" id="jform_cat_id_01" value="110" list="jform_cat_id_01_datalist" onchange="loadSubcategory(1)"><datalist id="jform_cat_id_01_datalist"></datalist>
</div>

Joomla version: 3.6.5