Django & JQuery 实现 Autocomplete

最新推荐文章于 2025-09-19 01:28:32 发布

转载最新推荐文章于 2025-09-19 01:28:32 发布 · 657 阅读

python+django 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用 Django 框架结合 jQuery 和 Autocomplete 插件实现输入框自动完成功能。具体步骤包括：设置运行环境（Django1.25、Python2.7、Jquery1.4等），设计前端页面 search.html 加载 Jquery 框架，创建数据库模型 model.py，以及后台匹配逻辑 search.py 提供实时数据。

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

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

运行环境：

设计要求：

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

实现由3部分组合完成：

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

search.html 代码

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>Django jQuery Autocomplete</title>
 
<script type="text/javascript" src="./Autocomplete/jquery.js"></script>
 
<script type="text/javascript" src="./Autocomplete/jquery.autocomplete.js"></script>
 
<link rel="stylesheet" type="text/css"href="./Autocomplete/jquery.autocomplete.css">
 
 
 
<script type="text/javascript">
 
$().ready(function() {
 
 
 
    function findValueCallback(event, data, formatted) {
 
        $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
 
    }
 
 
 
    function formatItem(row) {
 
        return row[0] + " <strong>产品编码:</strong>" + row[1] ; //此处可定制提示信息
 
    }
 
    function formatResult(row) {
 
        return row[0].replace(/(<.+?>)/gi, '');
 
    }
 
    $("#suggest").autocomplete('/search/', {
 
        width: 300,
 
        multiple: false,multipleSeparator: ' ',//此处关闭了多选功能,mulitiple: true为打开 ,mulitipleSeparator为多选时分隔符，默认为','
 
        matchContains: true,
 
        formatItem: formatItem, //格式化提示选项
 
        formatResult: formatResult //格式化结果输出
 
    });
 
    $("#suggest").result(function(event, data, formatted) {
 
        var hidden = $(this).parent().next().find(">:input");
 
        hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
 
    });
 
});
 
 
 
</script>
 
 
 
</head>
 
<body>
 
<div id="content">
 
    <form >
 
        <p>
 
            <label>please input:</label>
 
            <textarea id="suggest" class="ac_input"></textarea>
 
            <input type="button" value="Get Value">
 
        </p>
 
        <p>
 
            <label>Hidden input</label>
 
            <textarea></textarea>
 
        </p>
 
 
 
        <input type="submit" value="Submit">
 
    </form>
 
 
 
    <h3>Result:</h3> <ol id="result"></ol>
 
 
 
</div>
 
</body>
 
</html>

models.py

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

view.py

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

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