搜索输入框 jquery

jQuery搜索框输入实时进行查询

在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychange",function(event){ //进行查询操作 }) 一.首先分清下面几个概念:onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发.浏览器支持度较好.onpropertychange事件:此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件.元

类似baidu搜索修正jquery的autocomplete在firefox下不支持中文输入法的bug

解决方法:

关键字搜索：jQuery过滤器插件fastLiveFilter||显示结果条数

引用js库 <script src="jquery-1.6.4.min.js"></script> <script src="jquery.fastLiveFilter.js"></script> 划定搜索div范围 $('#name-Search').fastLiveFilter('#tableList'); 显示搜索结果条数 $('#name-Search').fastLiveFilter('#tableList'

关键字搜索高亮jQuery插件

// textSearch.js v1.0 文字,关键字的页面纯客户端搜索// 2010-06-23 修复多字母检索标签破碎的问题// 2010-06-29 修复页面注释显示的问题// 2013-05-07 修复继续搜素关键字包含之前搜索关键字没有结果的问题// 不论何种情况,务必保留作者署名. (function($){ $.fn.textSearch = function(str,options){ var defaults = { divFlag: true, divStr: " &quo

Gridview编辑时Jquery自动计算自定义列（鼠标离开输入框Jquery计算）

Jquery片段: <script type="text/javascript"> function compute(nbBoxQuantity, lblQuantityPerBox, lblQuantity, nbPrice, lblTotalAmounts) { if (nbBoxQuantity.value == "" || nbBoxQuantity.length == 0) { nbBoxQuantity.value = 0; } if (lb

Jquery实现搜索框提示功能

博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数据量很大的情况下使用Ajax去实现真的不合适,于是,我又写了一个使用Jquery来实现方法. 废话不多说,上图上代码: 引用方式: <body style="background-color: White;"> <form id="form1

使用CSS3和jQuery可伸缩的搜索条

使用CSS3和jQuery可伸缩的搜索条 helloweba.com 作者:月光光时间:2013-12-09 21:23 标签: CSS3 jquery 搜索条在我们网站是必不可少的,尤其是在有限的页面空间里,放置一个重要的搜索条是个难题,今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条. 查看演示下载源码在实例中,我们只展示一个搜索按钮,当点击搜索按钮时,输入框由右向左滑动展开,输入搜索内容后,点击搜索按钮则跳到搜索结果页,搜索输入框收起. HTM

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:

JQuery+AJAX实现搜索文本框的输入提示功能

平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单,在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,处理页面接收到值后进行模糊匹配查询,然后将结果返回,输入页收到返回的数据后在处理,并生成相应的页面显示在页面上.这样整个流程就结束了.如图: 输入页可以使用keyup事件接收输入的值并发送到处理页.具体代码如下: 输入页的代

搜索自动提示的简单模拟JQuery

使用jQuery实现类似于百度搜索时的自动完成功能,界面效果所示. 首先在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象.取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件.键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮.显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

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

在上一篇 jQuery打造智能提示插件上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { var KEY = { UP: 38, DOWN: 40, DEL: 46, TAB: 9, RETURN: 13

jQuery打造智能提示插件

插件根据实际需要在单功能上封装的,实现传入后台数据地址,要保存值的input,前台要传入的参数(过滤条件),来返回下拉提示数据,数据过多可上下滚动选择,选择后显示文本与对应的值,供后台操作,如图: js封装: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { $.fn.combox = function(options) { var KEY = {

Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

25个实用的jQuery技巧和解决方案

1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;});}); 2.搜索输入框文字的消失当鼠标获得焦点.失去焦点的时候,input输入框文字处理: $(document).ready(function(){ $(“input.text1″).val(“Enter your search text here”); textFill($(‘input.t

jQuery als.js 跑马灯

ali.js是一款滚动插件,滚动的内容可包含文字和图片.它的API也很强大,包括滚动区域可见个数.每次滚动个数.滚动方向.是否循环滚动.是否自动滚动.滚动间隔时间.滚动动画速度.动画效果.滚动方向以及开始滚动索引. 在线实例实例演示使用方法 <div id="lista1" class="als-container"> <span class="als-prev"><img src="ima

15天学会jquery

第二章 15 Days of jQuery 比window.onload 更快一些的载入 window.onload()是传统javascript 里一个能吃苦耐劳的家伙.它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径. 但有时候等待页面载入还是不够快. 只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使 window.onload()载入的很慢.所以当我为最近的网络营销创建一个web 应用程序的时候我不得希望更快一点.有一些围绕window.onload()

25个实用的jquery技巧

1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;});}); 2.搜索输入框文字的消失当鼠标获得焦点.失去焦点的时候,input输入框文字处理: $(document).ready(function(){ $(“input.text1″).val(“Enter your search text here”); textFill($(‘i

jquery插件库

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典的Slogan是“Write Less, Do more”(写更少的代码,做更多的事情).jQuery是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQue

jQuery Mobile 基础(第三章)

1.表单: 表单控件: 文本输入框搜索输入框单选按钮复选框选择菜单滑动条翻转拨动开关 fileld容器:如需让标签和表单元素看起来更适应宽屏,请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素包围 label/form 元素: <form method="post" action="demoform.html"> <div data-

jQuery Mobile 基础(第二章）

1.可折叠块: <div data-role="collapsible"> <h1>点击我 - 我可以折叠!</h1> <p>我是可折叠的内容.</p> </div> 备注: 1> data-role="collapsible" 属性.在容器(div)内,添加一个标题元素(H1-H6) ; 2>默认情况下,内容是被折叠起来的.如需在页面加载时展开内容,请使用 data-collaps

jquery plug-in DataTable API中文文档参考

前言:最近在做一个WEB后台,无意中发现这个插件,试用了一下觉得不错,但网上关于它的资料大多不全,所以利用一些时间将其API文档翻了一下,发在园子里供大家参考.(p.s:个人E文水平很差,对着灵格斯翻出来,肯定有很多不对的地方,欢迎指正,但请勿喷.) 构造函数: 默认带一个可选参数,该参数为一个对象,可配置项在DataTable.defaults命名空间中定义. 方法和参数说明: 一.静态属性方法或属性名参数说明返回值类型功能描述应用示例 version 无 string 主要供插

搜索输入框 jquery

热门专题