如何使用 jQuery ajax 实时搜索 Django 中的模型？

Posted 2023-02-24

【中文标题】如何使用 jQuery ajax 实时搜索 Django 中的模型？

【英文标题】：How do I jQuery ajax live search for the models in Django?

【发布时间】：2013-09-15 16:12:06

【问题描述】：

我尝试使用 jquery 和 ajax 进行实时搜索，甚至发布了关于此 here 的问题，但在我看来或在我编写的 ajax 脚本中似乎存在一些严重问题。它会正确搜索并加载内容。

但是，如果我退格并且搜索表单中没有值，它仍然会显示我第一次输入的值列表。我认为我的代码确实存在很大问题。

models.py：

class Status(models.Model):
    status = models.TextField()
    image = models.ImageField(upload_to=get_upload_file_name, blank=True)
    pub_date = models.DateTimeField(default=datetime.now)
    creator = models.ForeignKey(User, related_name="creator_set")
    likes = models.ManyToManyField(User, through="Like")

.html的sn-p：

        <input type="text" id="search" name="search" />
        <ul id="search-results">
        </ul>

views.py：

def search_status(request):

    if request.method == "GET":
        search_text = request.GET['search_text']
        if search_text is not None and search_text != u"":
            search_text = request.GET['search_text']
    else:
        search_text = ''  # I even tried using 0

    statuss = Status.objects.filter(status__contains = search_text)

    return render(request, 'ajax_search.html', 'statuss':statuss)

我已经在我的模板中加载了 jquery.min.js 脚本。

【问题讨论】：

1.请给我们看风景。该模型与这里的情况无关。 2. 在您的浏览器中，检查 javascript 的控制台并确认 javascript 没有错误。 ;-)

@J.C.Leitão 在控制台中，它没有显示错误。我已经编辑并添加了我使用的视图。请检查一下。你也想要js脚本吗？谢谢。

好的，很好。您可以尝试将stattuss放在if中，而在else中只放置statuss = []？

我尝试将状态放入第二个 if 和 else 我放入 statuss =[]，但即使现在它显示我输入的第一个字母。

@J.C.Leitão 我认为这是问题所在。假设我输入了check。现在在控制台中，当我退格一次时，它会查询 chec 并再次退格，它会查询 che 等等。然后在最后一个退格时，它停止查询字母c。即使搜索表单中没有值，它也会查询第一个输入的单词，并返回与字母 c 匹配的任何内容。

【参考方案1】：

我不得不在views.py 中缩进else 语句和return 语句。并将statuss 放在第二个 if 语句中。然后它按我的预期工作！如果有任何改进，请指导我。谢谢！

views.py：

def search_status(request):

    if request.method == "GET":
        search_text = request.GET['search_text']
        if search_text is not None and search_text != u"":
            search_text = request.GET['search_text']
            statuss = Status.objects.filter(status__contains = search_text)
        else:
            statuss = []

        return render(request, 'ajax_search.html', 'statuss':statuss)

这是 ajax 脚本：

$(function() 

    $('#search').keyup(function() 

        $.ajax(
            type: "GET",
            url: "/status/search_status/",
            data: 
                'search_text' : $('#search').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            ,
            success: searchSuccess,
            dataType: 'html'
        );
    );
);

function searchSuccess(data, textStatus, jqXHR)

    $('#search-results').html(data)

index.html 的片段：

    <input type="text" id="search" name="search" />
    <ul id="search-results">
    </ul>

包含的html：

% if statuss > 0 %
    <ul class="statuss">
        % for status in statuss %
            <li>
                <p>status</p>
            </li>
        % endfor %    
    </ul>
% else %
    <p>No status found.</p>
% endif %

【讨论】：

'ajax_search.html' 的内容是什么？