论坛首页 → 编程语言技术论坛 →

Django 结合 JQuery实现textfiled输入autocomplete功能

浏览 6133 次
锁定老帖子 主题：Django 结合 JQuery实现textfiled输入autocomplete功能
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • lxf289
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 90
  • 来自: 北京
   发表时间：2011-02-17  

 

原帖及代码地址 猛击这里

 

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

 

运行环境

 

功能要求


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

实现由3部分组合完成：

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

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>
margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important;
返回顶楼
         
  • shaohao
  • 等级: 初级会员
  • 性别:
  • 文章: 7
  • 积分: 30
  • 来自: 上海
   发表时间：2011-02-22  
jQuery-UI这里官方库里面有吧！
返回顶楼
          回帖地址
0 请登录后投票
  • APieceOfRedCloth
  • 等级: 初级会员
  • 性别:
  • 文章: 60
  • 积分: 0
  • 来自: 威海
   发表时间：2011-02-26  
autocomplete查查api就好。也就是熟悉下Django，写个数据库查询。
返回顶楼
          回帖地址
0 请登录后投票
  • lxf289
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 90
  • 来自: 北京
   发表时间：2011-03-07  
APieceOfRedCloth 写道
autocomplete查查api就好。也就是熟悉下Django，写个数据库查询。

楼上的同学说的是，新人学习中
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics