Blog

Blog

PHODAL

Django + Tastypie 打造 AutoComplete

想着自己的博客也就那么几篇,打造一个auto complete也不是一件很难的事:

  1. 一个所有文章的API
  2. AutoComplete插件

最后我们的结果有:

jquery auto complete
jquery auto complete

打造Django API

之前有一篇文章是写怎样用《Django Tastypie 构建Django RESTful API》,我们所还要做的就是,加一个filtering,最后我们的api的代码是:

class AllBlogSlugResource(BaseCorsResource, ModelResource):
    class Meta:
        queryset = BlogPost.objects.published()
        resource_name = "url"
        fields = ['keywords_string', 'slug', 'title']
        allowed_methods = ['get']
        serializer = Serializer()
        cache = SimpleCache(timeout=100)
        filtering = {
            'slug': ALL_WITH_RELATIONS,
            'title': ALL_WITH_RELATIONS
        }

title里接受不同的条件。

使用jQuery AutoComplete

因为在博客里已经用到了jQuery,于是自然而然的也就用到了jQuery AutoComplete

jQuery-Autocomplete

简介: Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.

  1. 请求的API是: '/api/v1/url/?limit=20&format=json&
  2. paramName是title包含某些字符
  3. onSelect后重定向到所选择的页面

所以最后我们的结果是:

$('#autocomplete2').autocomplete({
    minChars: 2,
    serviceUrl: '/api/v1/url/?limit=20&format=json&',
    paramName: 'title__contains',
    transformResult: function(response) {
        var result = [];
        $.each(JSON.parse(response).objects, function(index, dataItem) {
            result.push({value: dataItem.title, data: dataItem.slug});
        });

        return { suggestions: result }
    },
    onSelect: function (suggestion) {
        window.location.href = "{% url "blog_post_list" %}" + suggestion.data;
    }
});

其它

可以在下面的搜索框架中进行测试~~

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签