搜索框输入搜索名字，从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下：

        

html文件：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title></title>
  5.      <meta charset="utf-8"/>
  6.  <body>
  7.      <div style="margin-top: 300px;margin-left: 520px;">
  8.          <form action="/Fsearch/" method="get" style="margin: auto 0;">
  9.              请输入英文名：<br/>
  10.              <input type="text" id="search-text" name="q"><button type="button" id='search-button'>搜索</button>
  11.              <p><span id='search-result'></span></p>
  12.          </form>
  13.      </div>
  14.  <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
  15.  <script>
  16.      $(document).ready(function(){
  17.          $("#search-text").keyup(function(){
  18.              var q = $("#search-text").val();                         #获取搜索框输入的值
  19.              $.get("/Fsearch/",{'q':q}, function(data){               #参数：发送的url；传入的数据；请求成功后的调用函数（data即是试图函数返回的json格式数据）详情                 for (var i = data.length - 1; i >= 0; i--) {
  20.                      $('#search-result').append(data[i]+'<br/>')      #加入到search-result部分显示
  21.                  };
  22.              })
  23.          });
  24.          $('#search-text').keydown(function(){
  25.              $('#search-result').empty();
  26.          })
  27.          $('#search-text').blur(function(){
  28.              $('#search-result').empty();
  29.          })
  30.      });
  31.  </script>
  32.  </body>
  33.  </html>

对应的视图函数：

  1.  def Fsearch(request):
  2.      q = request.GET['q']
  3.      recontents = PreContent.objects.filter(name__contains=q)
  4.  
  5.  　　#此地很重要，由于要返回json类型到模板，但是json.dumps()只能够把python内置数据类型转化为json，所以以下把上面
           从数据库中取出来的queryset型数据转化为数组类型，再用json.dumps()方可成功。
  6. 6     rejson = []
  7. 7     for recontent in recontents:
  8. 8         rejson.append(recontent.name)
  9.      return HttpResponse(json.dumps(rejson), content_type='application/json')

Ajax (jquery)实现智能提示搜索框（in Django）的更多相关文章

  1. jQuery打造智能提示插件二（可编辑下拉框）

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

  2. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  3. 第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

  4. Visual Studio 2012设置Jquery/Javascript智能提示

    Visual Studio 2012设置Jquery/Javascript智能提示 在Visual Studio 2008 Visual Studio 2010中微软已经开始支持jquery/java ...

  5. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  6. 一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  7. 让Visual Studio Code对jQuery支持智能提示！

    本人新手,对代码各种不熟悉,记不准确,总是打错,造成各种失误!! 其实这个方法应该适合大部分前端开发工具!! 园里子有前人写了一篇文章对智能提示的实现!不过很多新手看不懂吧. http://www.c ...

  8. Win7系统下VS2008安装SP1补丁解决JQuery无智能提示的问题

    jQuery在vs2008中的智能提示 1  安装VS2008SP1补丁 要确保您的vs2008已经打了sp1补丁,在vs2008的帮助里的关于,要是安装了sp1,会出现“版本 3.5 sp1”,没安 ...

  9. 关于在asp.net添加jQuery的智能提示

    如果是vs2008以后的版本,一般都会支持jQuery自动提示代码功能,不支持也没关系,很简单的操作就能支持: 1.先为vs下载一个补丁,地址为:http://code.msdn.microsoft. ...

随机推荐

  1. PHP的抽象类和接口

    抽象类与接口相似,都是一种比较特殊的类.抽象类是一种特殊的类,而接口也是一种特殊的抽象类.它们通常配合面向对象的多态性一起使用.虽然声明和使用都比较容易,但它们的作用在理解上会困难一点. ①抽象类 在 ...

  2. 转载自php100中文网 centos下lamp 环境搭建

    学习PHP脚本编程语言之前,必须先搭建并熟悉开发环境,开发环境有很多种,例如LAMP.WAMP.MAMP等.这里我介绍一下LAMP环境的搭建,即Linux.Apache.MySQL.PHP环境. 一. ...

  3. Cstring类

    GetLength: 获取CString类的对象包含的字符串的长度(字节数) IsEmpty: 测试CString类的对象包含的字符串是否为空 Empty: 使CString类的对象包含的字符串为空字 ...

  4. CentOS 网络设置修改 指定IP地址 DNS 网关（转）

    CentOS 网络设置修改 指定IP地址 DNS 网关(实测 笔记)   环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Centos-6.5-x86_64 ...

  5. Filter及FilterChain的使用详解

    原文地址:http://blog.csdn.net/zhaozheng7758/article/details/6105749 一.Filter的介绍及使用 什么是过滤器? 与Servlet相似,过滤 ...

  6. C# 文件创建时间，修改时间

    System.IO.FileInfo fi = new System.IO.FileInfo(@"D:\site\EKECMS\skin\Grey\default#.html"); ...

  7. Android 之 Spinner

    1:activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...

  8. Android中的webview的进度条

    <application android:icon="@drawable/hunqin" android:label="@string/app_name" ...

  9. Largest product in a series

    这个我开始理解错了,算错了. 我以为是求连续5个数的最大值,结果,是连接5个数相乘的最大值. 英语不好,容易吃亏啊. Find the greatest product of five consecu ...

  10. Altium 9中正确的差分对走线方法

    1.在原理图中定义差分对在菜单中Place>>Directive为差分网络放置差分对指令.差分对网络名称必须以“_N”和“_P”作为后辍.对差分网络放置指令后要对其参数进行配置,包括Dif ...