php - jQuery UI 自动完成显示 html 代码

Question

我遇到了自动完成的问题，这让我有点困惑。我先查了一下，我不是唯一一个有这个问题的人。但每个人似乎都以自己的方式使用 jQuery Autocomplete，所以它并没有真正帮助我。

无论如何，问题就在这里。我正在构建一个搜索功能，该功能应该显示从 mysql 数据库检索的用户列表。我让它工作了。因此，当我开始输入时，它会立即显示用户列表。接下来我想做的是创建结果链接，将用户重定向到不同的页面。

这里是findartist.php；

if(isset($_GET['term'])){
$artist =   new User();
$return_arr =   array();
$results    = $artist->findUser($_GET['term']);
foreach($results as $result){
    $link = "<a href='profile/index.php?st=" . $result['stagename'] . "'/>" .     $result['stagename'] . "</a>";
    $return_arr[] = $link;
  }
echo json_encode($return_arr);
}

这是 jQuery；

    <script>
        $(function() {
            //autocomplete
            $(".artist_input").autocomplete({
                source: "/includes/findartist.php",
                minLength: 1
            });

        });
    </script>

问题是当我这样做时，它显示了 html 代码。这就是它的样子；

<a href='profile/index.php?st=bob'/>bob</a>

有办法解决这个问题吗？

Answer 1

这不是自动完成功能的工作方式。它被设置为假设您返回的是您想要显示的文本。它无法按照您要求的方式处理 HTML。

但是，这并不意味着一切都会丢失......

不要让 findartist 返回 <a> 的数组标签，只是艺术家姓名。

然后，您编写另一个函数，绑定(bind)到自动完成对象的“select”事件，该事件将导航到您想要的页面。

请参阅此处有关事件的文档:http://api.jqueryui.com/autocomplete/#event-select

例如，findartist.php 可能会更改为:

if(isset($_GET['term'])){

  $artist     = new User();
  $return_arr = array();
  $results    = $artist->findUser($_GET['term']);

  foreach($results as $result){
    $return_arr[] = $result['stagename'];
  }
  echo json_encode($return_arr);
}

您的自动完成功能可能类似于:

<script>
    $(function() {
        //autocomplete
        $(".artist_input").autocomplete({
            source: "/includes/findartist.php",
            minLength: 1,
            onSelect: function (suggestion) {
               // event fires when the user selects something from the list.
               window.location.href = "profile/index.php?st=" + suggestion;
            }
        });
    });
</script>

请原谅我任何不匹配的括号或语法错误 - 我在没有工作开发环境的情况下进行编码。无论如何，希望它能有所帮助。

尝试一下，看看效果如何。