JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框
平时用百度，谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个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" />
下面就是后台获取数据的代码了
刚才提到 '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自动完成）搜索引擎自动显示下拉框的更多相关文章
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- Jquery+Ajax下拉框级联查询
- 下拉框数据的动态选择，类似级联ajax刷新数据
简单的两个下拉列表,第二个中的数据与第一个下拉框相关: --------------------var selected = $(this).children('option:selected').v ...
- jQuery无限级联下拉框插件
自己编写jQuery插件 之 无限级联下拉框 因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
- struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)
针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...
- jQuery下拉框扩展和美化插件Chosen
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- jquery Combo Select 下拉框可选可输入插件
Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...
随机推荐
- 基於tiny4412的Linux內核移植--- 中斷和GPIO學習（1）
作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...
- 理解Java对象的交互：时钟显示程序
实现: 结构: 对象:时钟 - 对象:小时 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...
- 02- Shell脚本学习--运算符
Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 aw ...
- Java 组播
MulticastSocketServer.java package cn.edu.buaa.multicast; import java.io.IOException; import java.ne ...
- -A 解决数据库表太多，预读表时间很长
Reading table information for completion of table and column names You can turn off this feature to ...
- FIO使用指南
前言 fio是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎,包括:sync,mmap, libaio, posixaio, SG v3, splice, nul ...
- Poco C++——HTTP的post请求和get请求
两种请求都需要包含头文件: #include <iostream> #include <string> #include "Poco/Net/HTTPClientSe ...
- item30，最小的k个数
剑指offer给出两类方法: 1,借助快排的思想,需要修改输入数组的元素,时间复杂度O(n) 2,借助STL中set或者multiset,因为它们的底层数据结构是红黑树实现的,插入数据时间复杂度为O( ...
- rand5()产生rand7()
http://www.cnblogs.com/dwdxdy/archive/2012/07/28/2613135.html 利用rand5()产生rand7()．rand5()产生1到5的整数,ran ...
- socket编程在windows和linux下的区别
如无其它说明,本文所指Linux均表示2.6内核Linux,GCC编译器,Windows均表示Windows XP系统,Visual Studio 2005 sp1编译环境. 下面大概分几个方面进行罗 ...