jquery自动完成功能无法正常工作

Question

我想将Jquery自动完成工具附加到焦点上和焦点上的单元格，代码应该从数据库中读取特定记录并建议自动完成。

第一个php文件是

    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <title>Mail Management System</title>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'/>
        <link rel='stylesheet' href='/MMS/assets/css/bootstrap.min.css' type='text/css'  />
        <link rel='stylesheet' href='/MMS/assets/css/style.css' type='text/css' />
        <link  rel='stylesheet' href='/MMS/assets/css/jquery.datetimepicker.min.css'/>
        <link  rel='stylesheet' href='/MMS/assets/css/jquery-ui.css'/>
        <script src='/MMS/assets/jquery-3.2.1.min.js'></script>
        <script src='/MMS/assets/js/bootstrap.min.js'></script>
        <script src='/MMS/assets/js/jquery.datetimepicker.full.js'></script>
        <script src='/MMS/assets/js/jquery-ui.js'></script>
        <script src='/MMS/assets/js/table-edits.min.js'></script>
    </head>
    <body>
 <style>
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(3, 236, 254, .5);
        overflow-y: hidden;
        transition: 0.3s;
    }

    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: green;
        display: block;
        transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
        color: darkgreen;
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }

    @media screen and (max-height: 450px) {
      .overlay {overflow-y: auto;}
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
        <style>

            table {                
                font-family: arial, sans-serif;         
                border-collapse: collapse;          
                table-layout:fixed;         
                width: 100%;            
                padding: 2px;   
                border: 1px solid blue;                 
            }           
            th {            
                border: 1px solid blue;         
                padding-top: 10px;          
                padding-bottom: 10px;           
                background-color: #1b9add;          
                text-align: center;         

                valign: middle;         
                color: white;   
                background: #395870;
                background: linear-gradient(#49708f, #293f50);      
                max-width: 150px;           

            }           

            table td {          
                border: 1px solid blue;             
                word-wrap:break-word;           
                text-align: left;           
                vertical-align: top;            
                padding: 2px;           
            }           
            tr:nth-child(even) {            
                background-color: #dddddd;          
                padding: 2px;   
                border: 1px solid blue; 
            }           
            select option:checked {         
            color: white;           
            background: #f26532;            
            padding: 2px;           
            }           

        </style>    
        <title>Mail Management System: Register Send Mail</title>
        <div id="wrapper">
            <div class="container"> 
                <table>
                  <thead>
                    <tr>
                      <th scope="col" style="width:  100px;">Section</th>
                      <th scope="col" style="width: 200px;">File Reference</th>
                      <th scope="col" style="width: 50px;">Vol</th>
                      <th scope="col">Date Opened</th>
                      <th scope="col">Date Closed</th>
                      <th scope="col">SecStatus</th>
                      <th scope="col">Remarks</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td ><select name='section' id='section' class='form-control' >
                                  <option selected='C Org'>C Org</option><option value='CJA'>CJA</option>  
                                </select></td>
                      <td for ='fileRef'><input name ='fileRef' id="fileRef" class="form-control ui-autocomplete-input" autocomplete="on"></td>
                    </tr>
                  </tbody>
                </table>
            </div>
        </div>
<script>
 $('#fileRef').focus(function() {

    var availableFileRefs;
    var selectedSection = $('#section option:selected');
    var selsec = selectedSection.val();

     $.ajax({  
            url:"phpAssets/fileRefList.php",      
            method:"POST",      
            data:{selsec:selsec},      
            success:function(data){
                 $('#allmessage').html(data);
                 availableFileRefs =  new Array(data);
                 $('#allmessage').html(availableFileRefs);
                 $('#fileRef').autocomplete({
                 source: availableFileRefs
                });
            }
            });
  });
  </script>
 </body>
</html>

fileRefList.php的代码内容如下：

<?php
    $SelectedSec = $_POST['selsec'];
    $SelectedSec = str_replace('"', '', $SelectedSec);

    $tcn = "'" .  $SelectedSec  . "'";          
    $WhereCondition = 'WHERE (`Section` = ' . $tcn . ')';   

   $sql ="SELECT DISTINCT `File_Reference` FROM `fileindexregister` " . $WhereCondition;
   $result = mysqli_query($conn, $sql); 
   $result_array = Array();
    while ($row= mysqli_fetch_array($result)) { 
        $result_array[] = $row["File_Reference"];
    }
    $json_array = json_encode($result_array);
    echo ($json_array);
 ?>

The autocomplete feature is working but the output is not as desired. The snapshot is on This hyperlink图像显示两个记录作为SQL查询的结果，第二个var_dump()结果是在json_encode($result_array);之后

有人可以帮助解决问题吗？