Using JS id in dropdown – works from text file but not from a php variable string

I am using an HHTML form with a dropdown which is populated from a JS script through id.

<div class="ui-widget">
             <input id="ctags" class="form-control col-md-8" autocomplete="off" 
             placeholder="Start typing Collection Town" name="colltown_name" required>  
             <input id="ctag" type="hidden" name="colltown">
            </div>

The JS script to create the id “ctags” is as follows using a .txt file

<script>  //AUTOCOMPLETE FOR TOWNS - MOBILE FRIENDLY
      (function() {
        
        var towns = [<?php echo file_get_contents("file.txt")?>];
            
                    
        $("#ctags").autocomplete({
            source: towns,
            select: function( event, ui ) {
                $("#ctags").val(ui.item.label);
                $("#ctag").val(ui.item.value);
                return false;
            }
        });
  </script>

This dropdown populates and works as should, but I want to rather use a PHP SELECT statement to retrieve the information every time and generate a fresh list for the towns, as the information does change periodically. I have created the PHP SELECT section and it generates a PHP variable which is a string, that is identical to the txt file. I have checked this through console.log. So the PHP code to take the array returned from the SELECT statement is as follows. I have added str_replace to make sure that the string is identical to the txt file and $towns_dropdown is the array returned from the SELECT statement.

    <?php 
    $netJSON = json_encode($towns_dropdown);
    $net = str_replace("[","",$netJSON);
    $net1 = str_replace("]","",$net);
    ?>

I then change my JS to create the id “ctags” as follows using a PHP variable instead of the txt file.

<script>  //AUTOCOMPLETE FOR TOWNS - MOBILE FRIENDLY
      (function() {
        
        var towns='<?php echo $net1; ?>';
            
                    
        $("#ctags").autocomplete({
            source: towns,
            select: function( event, ui ) {
                $("#ctags").val(ui.item.label);
                $("#ctag").val(ui.item.value);
                return false;
            }
        });
    </script>

If I read results in console.log it displays the string, but the dropdown doesn’t populate. If I get the PHP create to create a new file from the PHP variable and then call that file (file.txt) in the JS script as follows:-

    <?php 
    $netJSON = json_encode($towns_dropdown);
    $net = str_replace("[","",$netJSON);
    $net1 = str_replace("]","",$net);
    $file = 'file.txt';
    $data = $net1;
    file_put_contents($file, $data);
    ?>

it populates the dropdown correctly

So JS calls the new file file.txt and it works, as in populating the dropdown.

So, in conclusion, I don’t seem to be able to get a PHP variable(which is a string) to get the dropdown to populate…….

Answer

I managed to get it working using the PHP variable as follows:-

<?php 
$towns_list = json_encode($towns_dropdown);
    ?>  

and the JS script line:-

var towns=<?php echo $towns_list; ?>;

@CBroe, you were correct, I was getting confused in the JSON shennanigans, once I saw through that it was pretty straight forward.