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

        

html文件：

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <meta charset="utf-8"/>

 <body>

     <div style="margin-top: 300px;margin-left: 520px;">

         <form action="/Fsearch/" method="get" style="margin: auto 0;">

             请输入英文名：<br/>

             <input type="text" id="search-text" name="q"><button type="button" id='search-button'>搜索</button>

             <p><span id='search-result'></span></p>

         </form>

     </div>

 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

 <script>

     $(document).ready(function(){

         $("#search-text").keyup(function(){

             var q = $("#search-text").val();                         #获取搜索框输入的值

             $.get("/Fsearch/",{'q':q}, function(data){               #参数：发送的url；传入的数据；请求成功后的调用函数（data即是试图函数返回的json格式数据）详情                 for (var i = data.length - 1; i >= 0; i--) {

                     $('#search-result').append(data[i]+'<br/>')      #加入到search-result部分显示

                 };

             })

         });

         $('#search-text').keydown(function(){

             $('#search-result').empty();

         })

         $('#search-text').blur(function(){

             $('#search-result').empty();

         })

     });

 </script>

 </body>

 </html>

对应的视图函数：

 def Fsearch(request):

     q = request.GET['q']

     recontents = PreContent.objects.filter(name__contains=q)

 　　#此地很重要，由于要返回json类型到模板，但是json.dumps()只能够把python内置数据类型转化为json，所以以下把上面
       从数据库中取出来的queryset型数据转化为数组类型，再用json.dumps()方可成功。

6     rejson = []

7     for recontent in recontents:

8         rejson.append(recontent.name)

     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. 武汉科技大学ACM ：1001: 零起点学算法34——继续求多项式

    Problem Description 输入1个正整数n, 计算1+(1+2)+(1+2+3)+...+(1+2+3+...+n) Input 输入正整数n(多组数据) Output 输出1+(1+2 ...

  2. [每日一题] OCP1z0-047 :2013-07-24 子查询――外查询与内查询的执行顺序

    一.Oracle的子查询分为两类分别是嵌套子查询和非嵌套子查询.所谓嵌套子查询是指,子查询是一个独立的查询不与外部查询相关,子查询将被先执行,而且只被执行一次,子查询执行完成后,再执行外部的查询,外部 ...

  3. 工作中用到的Jquery特效

    jQuery缓慢弹出下拉tab导航 http://sc.chinaz.com/jiaoben/130811578701.htm

  4. jquery keyup 在IOS设备上输入中文时不触发

    今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...

  5. iOS开发——C篇&预处理

    其实在C语言的远行过程中,有这样一个流程, 编译:C----〉可执行文件(可以运行的) 1:.C------.i 预处理(之前和之后还是C语法)2: .i-------.s 编译(之前是C语法,之后是 ...

  6. 使用Jstl异常：The absolute uri: http://java.sun.com/jsp/jstl/core cannot&nbs

    错误提示是:        org.apache.jasper.JasperException: This absolute uri http://java.sun.com/jsp/jstl/core ...

  7. C#中struct与class的区别详解

    转自:http://blog.csdn.net/justlovepro/archive/2007/11/02/1863734.aspx 有这么几点不同: 1.struct 是值类型,class是对象类 ...

  8. CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （一）Nginx安装篇

    CentOS 6.5 minimal安装不再赘述 Nginx源码安装 1.安装wget下载程序 yum -y install wget 2.安装编译环境:gcc gcc-c++ automake au ...

  9. 两段小PYTHON，作啥用的，行内人才懂~~~：（

    哎,作也不是,不作也不是.... 下次有更新文件时,直接刷新一次了. #coding: UTF-8 import sys reload(sys) sys.setdefaultencoding( &qu ...

  10. 电磁兼容性设计学习笔记--PCB中地的布局

    http://bbs.ednchina.com/BLOG_ARTICLE_3010439.HTM PCB上元器件的布局对整个PCB板的电磁兼容性影响很大,所以从事硬件电路设计的工程师很有必要学习PCB ...