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

【问题标题】：Django search field with ajax that shows result dropdown with hyperlinks带有 ajax 的 Django 搜索字段显示带有超链接的结果下拉列表
【发布时间】：2016-07-06 01:11:27
【问题描述】：

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

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

我设法按照本教程进行操作：http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/

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

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

这是我可以让 select2 为我做的事情吗？这是我可以通过引导程序实现的吗？

任何帮助将不胜感激！

【问题讨论】：

标签： jquery ajax django select2

【解决方案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" />

【讨论】：