django - Ajax Live Search,我做错了什么?

时间:2017-09-27 13:56:22

标签: jquery ajax django django-templates django-views

我尝试使用实时搜索功能,只要您在搜索框中输入内容,结果就会自动显示在下方。我一直跟着this tutorial没有运气。当我输入查询时似乎没有发生任何事情。

有人可以告诉我我做错了吗?

urls.py

urlpatterns = [
    url(r'^$', views.list_of_post, name='list_of_post'),
    [...]
    url(r'^search/$', views.search_titles),
]

# this is my blog app views. Original view contains
# url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),

views.py

# Main view that displays all my posts

def list_of_post(request):
    post = Post.objects.filter(status='published')
    categories = Category.objects.all()

    template = 'blog/post/list_of_post.html'

    context = {
        'posts': posts,
        'categories': categories,

        [...]
    }
    return render(request, template, context)

# View that should return my results?

def search_titles(request):
    if request.method == 'POST':
        search_text = request.POST['search_text']
    else:
        search_text = ''

    classes = Post.objects.filter(title__contains=search_text)

    return render_to_response('blog/ajax_search.html', {'classes': classes})

模板

<h3>Search</h3>
{% csrf_token %}
<input type="text" id="search" name="search"/>
<ul id="search-results">
</ul>

ajax_search.html

{% if classes %}
        {% for class in classes %}
            <p>{{ class.title }}</p>
        {% endfor %}
{% else %}
    <p>No classes found.</p>
{% endif %}

最后,ajax.js

$(function() {

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

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

function searchSuccess(data, textStatus, jqXHR)
{
    $('#search-results').html(data)
}

我的所有文件都已正确加载,快速控制台检查确认ajax.js&amp; jquery加载没有错误。当我在搜索框中输入任何内容时,下面没有任何内容。我已经非常一致地遵循了教程,我无法看到我可能出错的地方。如果有人可以提供帮助,我们将不胜感激!

2 个答案:

答案 0 :(得分:0)

你有两个问题:

  • 您需要在search_title函数中返回渲染json。
  • 返回时,无法通过django模板标签显示数据 搜索结果模板中的ajax请求数据。

请遵循这篇文章。这确实有效  https://realpython.com/blog/python/django-and-ajax-form-submissions/

答案 1 :(得分:0)

URL模式定义中可能出现此问题。默认情况下,Django从上到下解析URL。所以你可以从

改变模式
urlpatterns = [
url(r'^$', views.list_of_post, name='list_of_post'),
[...]
url(r'^search/$', views.search_titles),]

到下面的一个并再试一次。确保在搜索之前没有URL,其他模式和视图函数从URL中获取参数。搜索URL的首选位置就在第一个URL之后。还请交叉检查head部分中链接的ajax和jquery源文件。

urlpatterns = [
url(r'^$', views.list_of_post, name='list_of_post'),
url(r'^search/$', views.search_titles),
[...]
]