Javascript 链接自动完成结果

我已经建立了一个非常基本的自动完成搜索框，它能够将数据库查询中的名称返回到下拉列表中，但是我很难将这些名称链接到适当的配置文件

预期结果：用户开始键入员工姓名，输入中填充匹配的员工及其部门，然后用户可以单击他们正在搜索的员工姓名以访问他们的个人资料。如果可能的话，我还想在员工姓名旁边放一张员工的照片

我对Javascript非常陌生，我花了很长时间才达到这一点，我缺乏必要的资金来知道从哪里开始着手下一步。我真的很感激被指向正确的方向

搜索框：

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script> $(function() {
    var url = '/search.php' + "?action=search";

    $( "#resizedtextbox" ).autocomplete({
      minLength: 3,
      source: url,
      focus: function( event, ui ) {
        $( "#resizedtextbox" ).val( ui.item.name );
        return false;
      },
      select: function( event, ui ) {
        $( "#name" ).val( ui.item.name );
        $( "#dpt" ).val( ui.item.dpt );
        $( "#link" ).html( ui.item.link );
        $( "#link" ).attr( "src", "images/" + ui.item.image );

        return false;
      }
    })
.autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
        .append('<a href="/' + item.link + '"><table><tr><td width= "5%"><img src="/' + item.link + '/profilepicture.jpg" width=100%></td><td width=95%>' + item.name + '<br>(' + item.dpt + ')</a></td></tr></table>')
        .appendTo(ul);
};
  });</script>

<div class="searchbar" id="searchbar">
<table width=100%><tr><td width= 95.5%><input type="text" name="resizedtextbox" id="resizedtextbox" class="resizedtextbox" placeholder="Search for a staff member..."></td>
<td width=4%><img src='searchbutton.png' width= 40px height= 40px></td></tr></table>
</div>

Search.php

<?php 
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/config.php";
require_once "$path";?>


<?php
    $id = $_GET["term"]; 
    $searchquery = "

    SELECT staff_member as name, profile_url as link, 
    department as dpt FROM staff_a
    WHERE staff_member LIKE '%".$id."%'
    UNION ALL
    SELECT name as name, profile_url as link, 
    department as dpt FROM staff_b
    WHERE name LIKE '%".$id."%'
    ";
        $result = $conn->query($searchquery);

while ($row = $result->fetch_assoc()) {
            $data[] = $row;

}
//return json data
echo json_encode($data);
?>

实际上，我想返回到我的输入框中的是这样的东西

<table><tr><td><a href="$row[link]"><img src="/site/$row[link]/profilepicture.jpeg">$row[name] ($row[department])</a></td></tr></table>

编辑：这里的信息似乎是我所需要的，但是原始海报没有为他们的搜索页面发布代码，所以我对如何实现解决方案有点迷茫

Edit2：经过相当多的调整，成功地使其工作，并用正确的答案编辑了上面的代码，以防将来有人偶然发现这一点

我现在唯一的问题是，我希望当用户在正确的职员上按enter键时，以及当他们当前用光标单击时，能够将用户带到正确的配置文件，按enter键只会在文本框中填入职员的姓名。

服务器端：您需要从查询结果中响应每个用户的所有必要字段：

---

非常感谢你的帮助。事实上，我在等待人们回答的时候拼凑出了一个有效的解决方案。它可能没有你的解决方案那么雄辩，但它似乎很管用。尽管如此，我真的很感谢你抽出时间来做这件事！

[
  {
    "id": 1,
    "name": "John",
    "value": "John",
    "link": "#john",
    "department": "d1"
  },
  ...
]