即时搜索(input框)
做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下。
即时搜索的方案:
(1)change事件 触发事件必须满足两个条件:
propertychange,只要当前对象属性发生改变。
比如一个input输入文字后出现下拉框,如图:
当输入框里面内容为空时,下拉框要隐藏,可以通过input和propertychange方法实现,代码如下:
- <script>
- $("#search").bind("input propertychange",function(){
- var value=$(this).val();
- if(value){
- $(".pc_search ul").show();
- }else{
- $(".pc_search ul").hide();
- }
- });
- </script>
这里bind同时绑定了input和propertychange两个方法。
即时搜索(input框)的更多相关文章
- 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示
对于通过用户输入关键词实现自己主动弹出相关搜索结果,这里本人给两种解决方式,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的keyword异步调用数据表中的相关 ...
- 监听input框变化,即时搜索 compositionstart, compositionend
前话: 如果直接通过input监听, 它是键盘输入按键按下了就触发时间,这样可能导致一些问题,比如在谷歌浏览器想输入中文输入不了: 解决方案: 用 compositionstart 和 composi ...
- 当滚动列表的时候,让input框失去焦点(移动端会收起键盘)
1.拓展scroll.vue事件 beforeScroll:{ type:Boolean, default:false } if(this.beforeScroll){//滚动列表的时候收起键盘(移动 ...
- input事件在进行模糊搜索时,用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)
做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...
- jQuery实现input框输入值动态搜索
我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...
- Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)
此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...
- 小实例---关于input宽度自适应以及多个input框合并拆分
前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...
- [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...
- input框focus时的美化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Codeforces Round #366 (Div. 2)
CF 复仇者联盟场... 水题 A - Hulk(绿巨人) 输出love hate... #include <bits/stdc++.h> typedef long long ll; co ...
- webpack -p压缩打包react报语法错误处理
前言:在用webpack打包react代码的时候发现一个问题,做一个处理总结. 我的webpack配置: var webpack = require('webpack'); //打包less插件 va ...
- 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 ...
- ssh自动输入密码脚本 切换目录脚本
利用expect的,首先查看expect,命令:which expect #!/usr/bin/expect -f spawn ssh 用户名@ip地址 expect "assword:&q ...
- 【翻译svg教程 】svg 的坐标系统
http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- 关于IOS浏览器:document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- final 140字评论
按照演讲顺序 1.约跑app 个人感觉约跑现在做的已经很不错了,要是能添加地图就更好了. 2.礼物挑选 给人感觉在一定的时间做到这个程度,很不错很好,讲的声音有点小. ...
- JQM (功能栏、导航条)
在Mobile中导航条的基本结构: <div data-role="navbar"> ul>li>a </div> 其中含有“行(grid)”和 ...
- js微博发布框的实现
观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...