做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下。

即时搜索的方案:

(1)change事件    触发事件必须满足两个条件:

a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur)
 (2)keypress  恩,还好。。。。。就是能监听键盘事件,鼠标复制黏贴操作他就无能为力的赶脚了。。。。。
 (3)propertychange(ie)和input事件
input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

propertychange,只要当前对象属性发生改变。

比如一个input输入文字后出现下拉框,如图:

当输入框里面内容为空时,下拉框要隐藏,可以通过input和propertychange方法实现,代码如下:

  1. <script>
  2. $("#search").bind("input propertychange",function(){
  3. var value=$(this).val();
  4. if(value){
  5. $(".pc_search ul").show();
  6. }else{
  7. $(".pc_search ul").hide();
  8. }
  9. });
  10. </script>

这里bind同时绑定了input和propertychange两个方法。

即时搜索(input框)的更多相关文章

  1. 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示

    对于通过用户输入关键词实现自己主动弹出相关搜索结果,这里本人给两种解决方式,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的keyword异步调用数据表中的相关 ...

  2. 监听input框变化,即时搜索 compositionstart, compositionend

    前话: 如果直接通过input监听, 它是键盘输入按键按下了就触发时间,这样可能导致一些问题,比如在谷歌浏览器想输入中文输入不了: 解决方案: 用 compositionstart 和 composi ...

  3. 当滚动列表的时候,让input框失去焦点(移动端会收起键盘)

    1.拓展scroll.vue事件 beforeScroll:{ type:Boolean, default:false } if(this.beforeScroll){//滚动列表的时候收起键盘(移动 ...

  4. input事件在进行模糊搜索时,用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  5. jQuery实现input框输入值动态搜索

    我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...

  6. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

  7. 小实例---关于input宽度自适应以及多个input框合并拆分

    前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...

  8. [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

    1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...

  9. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Codeforces Round #366 (Div. 2)

    CF 复仇者联盟场... 水题 A - Hulk(绿巨人) 输出love hate... #include <bits/stdc++.h> typedef long long ll; co ...

  2. webpack -p压缩打包react报语法错误处理

    前言:在用webpack打包react代码的时候发现一个问题,做一个处理总结. 我的webpack配置: var webpack = require('webpack'); //打包less插件 va ...

  3. Codeforces CF#628 Education 8 E. Zbazi in Zeydabad

    E. Zbazi in Zeydabad time limit per test 5 seconds memory limit per test 512 megabytes input standar ...

  4. ssh自动输入密码脚本 切换目录脚本

    利用expect的,首先查看expect,命令:which expect #!/usr/bin/expect -f spawn ssh 用户名@ip地址 expect "assword:&q ...

  5. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  6. javascript 创建对象的7种模式

    使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...

  7. 关于IOS浏览器:document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  8. final 140字评论

    按照演讲顺序 1.约跑app         个人感觉约跑现在做的已经很不错了,要是能添加地图就更好了. 2.礼物挑选         给人感觉在一定的时间做到这个程度,很不错很好,讲的声音有点小. ...

  9. JQM (功能栏、导航条)

    在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...

  10. js微博发布框的实现

    观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...