Django & JQuery 实现 Autocomplete

输入框自动完成（Autocomplete 或称 Suggest）是一般系统中常见的功能，但是通过Django来实现，于我来说（刚开始接触Python）还是第一次，经过近1天的时间，终于完成了所有的设计中的功能，记录下来，留给其他有需要的同学及自己备忘：

注：因为懒得调整CSS和截图了，所以找了张最终效果与本文基本接近的示意图，特此说明。

运行环境：

设计要求：

基本：提供一个输入框，用户在框中输入数据时系统根据数据库中内容自动提取与之匹配的数据，在输入框下方显示并由用户选取
进阶：输入框下方的提示匹配列表内容可定制，如同时显示产品名称及产品编码，用户选取后结果也可定制，确定采用产品名称或编码均可

实现由3部分组合完成：

前台页面：search.html （提供搜索及结果返回界面，并加载Jquery框架）
数据库模型：model.py
后台匹配：search.py （根据搜索要求实时提供数据）

search.html 代码

01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
02<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
03<title>Django jQuery Autocomplete</title>
04<script type="text/javascript" src="./Autocomplete/jquery.js"></script>
05<script type="text/javascript" src="./Autocomplete/jquery.autocomplete.js"></script>
06<link rel="stylesheet" type="text/css"href="./Autocomplete/jquery.autocomplete.css">
07 
08<script type="text/javascript">
09$().ready(function() {
10 
11    function findValueCallback(event, data, formatted) {
12        $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
13    }
14 
15    function formatItem(row) {
16        return row[0] + " <strong>产品编码:</strong>" + row[1] ; //此处可定制提示信息
17    }
18    function formatResult(row) {
19        return row[0].replace(/(<.+?>)/gi, '');
20    }
21    $("#suggest").autocomplete('/search/', {
22        width: 300,
23        multiple: false,multipleSeparator: ' ',//此处关闭了多选功能,mulitiple: true为打开 ,mulitipleSeparator为多选时分隔符，默认为','
24        matchContains: true,
25        formatItem: formatItem, //格式化提示选项
26        formatResult: formatResult //格式化结果输出
27    });
28    $("#suggest").result(function(event, data, formatted) {
29        var hidden = $(this).parent().next().find(">:input");
30        hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
31    });
32});
33 
34</script>
35 
36</head>
37<body>
38<div id="content">
39    <form >
40        <p>
41            <label>please input:</label>
42            <textarea id="suggest" class="ac_input"></textarea>
43            <input type="button" value="Get Value">
44        </p>
45        <p>
46            <label>Hidden input</label>
47            <textarea></textarea>
48        </p>
49 
50        <input type="submit" value="Submit">
51    </form>
52 
53    <h3>Result:</h3> <ol id="result"></ol>
54 
55</div>
56</body>
57</html>

models.py

1class Products(models.Model):
2    name = models.CharField(max_length=60)
3    code = models.CharField(max_length=30)
4    def __unicode__(self):
5        return self.name
6 
7    def _get_full_name(self): #注意此处，很重要，通过加入full_name这一属性，完成了与JS的数据对接
8        return ("%s|%s") %(self.name,self.code) #与JS代码中的格式要求一致即可
9    full_name = property(_get_full_name)

view.py

显示源码
打印?
01# -*- coding: UTF-8 -*-
02from learn.school.models import Products
03from django.http import HttpResponse
04from django.db.models import Q
05 
06def tag_autocomplete(request):
07    if request.GET.has_key('q'):
08        q_str = request.GET['q']
09        if len(q_str)>0: #定义输入多少字符后开始查询
10            tags = (Students.objects.filter(Q (name__icontains=request.GET['q']) | Q (age__icontains=request.GET['q'])))[:10]#导入高级查询模式Q 进行逻辑或查询,此处查询结果数最好与JS代码中的限制一致，避免多余开销
11            return HttpResponse('\n'.join(tag.full_name for tag in tags)) #使用了模型中自定义的属性 full_name
12    return HttpResponse()

然后在urls,py中配置好你的 /search/ 指向到 view.py 中的 tag_autocomplete即可。

posted @ 2012-05-24 09:34 lhj588 阅读(2513) 评论(0) 收藏举报

刷新页面返回顶部

lhj588