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

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

最后我们的结果有:

打造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;
    }
});

其它

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