Question

我整理了一个非常基本的自动完成搜索框，该框能够将数据库查询中的名称返回到下拉列表中，但是在将它们链接到适当的配置文件时遇到了麻烦。

预期结果：用户开始输入职员姓名，输入的内容将包含匹配的职员及其所属部门，然后用户可以单击要搜索的职员姓名以访问其个人资料。如果可能的话，我还希望在职员姓名旁边出现一张职员的照片。

我是Java的新手，花了很长时间才到达这一点，而且我没有足够的钱来知道从哪里着手进行下一步。我真的很高兴能指出正确的方向！

搜索框：


  <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>

编辑：看来这里的信息-Getting jQuery autocomplete to display results as links可能是我所需要的，但是原始张贴者并未在其搜索页面上发布代码，因此我对如何实现该方法有些困惑解决方案。

Edit2：设法对其进行了相当多的调整，并编辑了上面的代码，并给出了正确答案，以防将来有人偶然发现此错误。

我现在唯一的问题是，我希望用户在他们点击正确的职员上的回车键以及他们用光标单击时将他们带到正确的个人资料（目前，点击回车键只会填充文本框加上工作人员的名字。

Answer 1

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

Store

您的回复应如下所示：

<?php

//...

while ($row = $result->fetch_assoc()) {
    $data[] = [
        'name' => $row['name'],
        'value' => $row['name'], // value is required for autocomplete to display
        'department' => $row['department'],
        'link' => $row['link'],
        'id' => $row['id'],

        // ...
    ];
}

客户端：

添加事件[ { "id": 1, "name": "John", "value": "John", "link": "#john", "department": "d1" }, ... ]以便在用户从建议中选择项目时进行处理，这将更新DOM以填充员工姓名，图片，...

select

$(function() {
  $("#resizedtextbox").autocomplete({
    source: 'search.php',
    // trigger when user clicks item
    select: function(e, ui) {
      console.log(ui);
      let user = ui.item;
      // update DOM
      $('#name').text(user.name);
      $('#department').text(user.department);
      // other fields: image, link...
    }
  });
});

正在工作的小提琴：https://jsfiddle.net/c4wbrkt0/

链接自动完成结果

1 个答案: