您的位置：首页 > Web前端 > JQuery

Django & JQuery 实现 Autocomplete

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





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

运行环境：

Django 1.25

Python 2.7

Jquery 1.4

Jquery Autocomplete 插件

设计要求：

基本：提供一个输入框，用户在框中输入数据时系统根据数据库中内容自动提取与之匹配的数据，在输入框下方显示并由用户选取

进阶：输入框下方的提示匹配列表内容可定制，如同时显示产品名称及产品编码，用户选取后结果也可定制，确定采用产品名称或编码均可

实现由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
1
class
 
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 -*-
02
from
 
learn.school.models
import
 
Products
03
from
 
django.http
import
 
HttpResponse
04
from
 
django.db.models
import
 
Q
05
06
def
 
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即可
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航