带有ajax的Django搜索字段，显示带有超链接的结果下拉列表

Question

我有一个Django应用程序，在这个应用程序中我想实现一个搜索字段。当用户开始输入学生的姓名时，我想通过下拉搜索结果返回通过Ajax匹配的所有学生姓名。

但是，我希望结果是超链接，因此当用户看到正确的条目并单击它时，他将被重定向到学生的详细信息页面。

我设法遵循了这个教程：http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/

但它会在网页中插入结果并将所有内容向下移动。相反，我想在类似下拉列表的字段中显示它，如下图所示：

这是推荐给我的select2的例子。但是，我不想要一个选择字段。相反，用户应该点击被重定向到搜索结果中嵌入的任何链接（在这种情况下，例如github页面），但我还没有实现。

这是我可以选择为我做的事情吗？这是我用bootstrap可以实现的吗？

任何帮助将不胜感激！

Answer 1

您可以使用功能templateResult来更改结果：

var results = [
  {img: 'http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico', text: 'qwerty', url: '#'},
  {img: 'http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico', text: 'zxcvbn', url: '#'},
  {img: 'http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico', text: 'asdfgh', url: '#'},
];

$("[name='results']").select2({
        placeholder: "Enter search query",
        templateResult: function(result) {
            return $(
              '<a href="' + result.url + '"><img class="search-result-img" src="' + result.img + '">' + result.text + '</a>'
            );
        },
        data: results
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<input type="text" name="results" />