平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取搜索提示信息然后返回呈现出来 上效果图

闲话不多说直接上代码

本文使用到的文件有:

1,点击 Ajax Autocomplete for jQuery, version 1.1.3  下载

引用文件:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.autocomplete.js"></script> 

使用方法:

定义一个id 为query的文本框

<input type="text" name="query" id="query" />
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

下面就是后台获取数据的代码了

刚才提到 'QueryServices.ashx'  这个文件 这就是后台处理数据的文件

因为这个插件要求返回结果必须是一个JSON对象 这个JSON对象的格式是这样的

{  query:'Li', //前台输入的查询内容  suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],//这里就是下拉框里显示的数据了 和下面的data是对应的 属于一键一值  data:['LR','LY','LI','LT']//这里和suggestions对应 作为suggestions的键 }

suggestions 对应前台 onAutocompleteSelect =function(value, data) 回调函数的 value 而

data 顾名思义 对应data

插件介绍到此为止  数据传送格式已和大家 列出大家可根据自己所用语言 自行 序列化

JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框的更多相关文章

  1. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  2. Jquery+Ajax下拉框级联查询

  3. 下拉框数据的动态选择,类似级联ajax刷新数据

    简单的两个下拉列表,第二个中的数据与第一个下拉框相关: --------------------var selected = $(this).children('option:selected').v ...

  4. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  5. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  6. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集,ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  7. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  8. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  9. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

随机推荐

  1. 基於tiny4412的Linux內核移植--- 中斷和GPIO學習(1)

    作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...

  2. 理解Java对象的交互:时钟显示程序

    实现: 结构: 对象:时钟  - 对象:小时                 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...

  3. 02- Shell脚本学习--运算符

    Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 aw ...

  4. Java 组播

    MulticastSocketServer.java package cn.edu.buaa.multicast; import java.io.IOException; import java.ne ...

  5. -A 解决数据库表太多,预读表时间很长

    Reading table information for completion of table and column names You can turn off this feature to ...

  6. FIO使用指南

    前言 fio是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, nul ...

  7. Poco C++——HTTP的post请求和get请求

    两种请求都需要包含头文件: #include <iostream> #include <string> #include "Poco/Net/HTTPClientSe ...

  8. item30,最小的k个数

    剑指offer给出两类方法: 1,借助快排的思想,需要修改输入数组的元素,时间复杂度O(n) 2,借助STL中set或者multiset,因为它们的底层数据结构是红黑树实现的,插入数据时间复杂度为O( ...

  9. rand5()产生rand7()

    http://www.cnblogs.com/dwdxdy/archive/2012/07/28/2613135.html 利用rand5()产生rand7().rand5()产生1到5的整数,ran ...

  10. socket编程在windows和linux下的区别

    如无其它说明,本文所指Linux均表示2.6内核Linux,GCC编译器,Windows均表示Windows XP系统,Visual Studio 2005 sp1编译环境. 下面大概分几个方面进行罗 ...