Autogenerate Front End Form Field With jQuery

Hi the autocomplete expects source to be array, URL string and function return. Even if you give JSON then it should have label and value. Which is not present here as you are simply output the get_terms with all fields.

So what I would suggest is just return the name of categories. Changing the fields from all to names will work well.

<?php 
$args = array(
    'orderby'                => 'name',
    'order'                  => 'ASC',
    'hide_empty'             => false,
    'include'                => array(),
    'exclude'                => array(),
    'exclude_tree'           => array(),
    'number'                 => '',
    'offset'                 => '',
    'fields'                 => 'names',
    'name'                   => '',
    'slug'                   => '',
    'hierarchical'           => true,
    'search'                 => '',
    'name__like'             => '',
    'description__like'      => '',
    'pad_counts'             => false,
    'get'                    => '',
    'parent'                 => '0',
    'childless'              => false,
    'cache_domain'           => 'core',
    'update_term_meta_cache' => true,
    'meta_query'             => ''
);
$phpArray = get_terms( 'listing_taxonomy', $args );
?>
<script>
    $(function() {
    var availableTags = <?php echo json_encode($phpArray); ?>;
    $( "#tags" ).autocomplete({
      source: availableTags
    });
    });
</script>