如何实现实时模糊搜索功能(粘贴后自动搜索功能)
2017-09-20| 程成| 1364| 1| PHP技术

    关于如何在一个input中通过改变,模糊匹配和搜索功能。如下图所示,通过这里键盘输入和鼠标操作,都可以实现订货号的搜索功能。

image.png


    这里通过ajax到后台,再返回json数据到前台。这里键盘可以绑定keyup事件,但是鼠标粘贴后发现不会搜索,每次获取到的input框值总是上次的值,虽然绑定了mouseup事件。


    这是因为鼠标右击粘贴事件发生在获取value之后,所以你每次都没法获取粘贴后的value值。这里change是没用的,change需要input失去焦点以后才会触发,可以自己试试。



解决方法:


一、获取粘贴板内容


window.clipboardData.getData('Text')


网上很多方法,这里不推荐,因为各浏览器兼容问题。



二、绑定"input propertychange"事件


$("#text").bind('input propertychange', function() {}


这个事件很强大,ie8以及以上版本亲测可用,以及一些常用浏览器。

input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

propertychange是ie专属的事件,只要当前对象属性发生改变就会触发。


通过以上方法可以实现模糊搜索功能以及粘贴后自动搜索功能。




×
作者:程成
QQ:492245711