美文网首页前端
js实现输入框实时搜索

js实现输入框实时搜索

作者: 小气的王二狗 | 来源:发表于2018-04-23 19:31 被阅读776次

想做出的效果就是一边输入关键词,搜索框下面就可以跳出搜索结果

我觉得应该是简单,监听键盘输入动作不就行了?
实际做的时候发现没这么简单,onkeyup(),搜索结果总是会乱掉,而且onkeyup不支持复制粘贴;
看看类似功能的这几个时间:

onchange事件:

只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效

onkeydown/onkeypress/onkeyup事件

在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善
只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效

onpropertychange事件

此属性可在某些情况下解决上面存在的问题,不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。遗憾的是,onpropertychange为IE专属的
oninput
HTML5中的标准事件,不过IE9以下的浏览器是不支持oninput事件的。
在手册里翻到了oninput:仅仅在input的value值发生改变才会触发,鼠标键盘复制粘贴均可以触发,但是js修改其value值则不会触发。(chrome/safari/ff/opera/IE9+)基本上已经ok了,ie9以下怎么办呢?兼容onpropertychange就ok了。
下面是代码:
js部分

function OnInput (event) {
    if(event.target.value!='') {

        $.get("http://arrest.site:3000/search?keywords=" + event.target.value + '&limit=12', function (data) {
            // console.log(data)
            $('.it-res').html(' ');
            for(var i=0;i<(data.result.songs).length;i++){
                $('.it-res').append('<br><span onclick="play(event)" id="'+data.result.songs[i].id +'">&nbsp&nbsp-'+data.result.songs[i].name+'</span><br><br>');
            }
            $('.search-res').show();
        });


    }else{
        $('.search-res').hide();
    }
}
// Internet Explorer
function OnPropChanged (event) {
    if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
    }
}

在线演示:http://arrest.site/netmusic/m/ 导航栏点搜索

相关文章

  • js实现输入框实时搜索

    想做出的效果就是一边输入关键词,搜索框下面就可以跳出搜索结果 我觉得应该是简单,监听键盘输入动作不就行了?实际做的...

  • Combox

    js实现带搜索功能的下拉框实时搜索实时匹配http://m.jb51.net/article/42813.htm

  • iOS 海量数据本地实时搜索引擎

    前言 伴随着业务的迭代, 在数据量有大概四五万情况下, 需要实现实时搜索, 也就是在输入框输入时实时匹配搜索结果,...

  • ios 细节一下实时搜索

    前言 在实时搜索的时候,我们需要根据输入框搜索内容配合后台实时搜索。对于自定义的搜索框,我们使用的方法如下: 可以...

  • html通过JS/jQuery实现 实时监听输入框input的内

    最近在做一个功能:联想搜索功能。具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获...

  • UITexifield输入增加实时搜索

    接到任务 虽然做了很多次UISearchbar的搜索,但是这次产品让加一个在输入框下面出一个弹窗能够实现实时搜索功...

  • jquery和js实时监听input输入框值变化

    jquery和js实时监听input输入框值变化 jquery: $("#input1").bind("input...

  • RxJS 初探

    经典例子:小试牛刀 (轻而易举搞定异步处理) 场景:input 输入框实时搜索,根据输入的关键字,实时发送异步请求...

  • onpropertychange 实现实时监控input输入框事

    onpropertychange 实现实时监控input输入框事件 在 Web 开发中经常会碰到需要动态监听输入框...

  • 搜索框 功能测试点

    若查询条件为输入框,则参考输入框对应类型的TEST方法 一、功能实现:1.搜索按钮功能是否实现;2.点搜索后,原先...

网友评论

    本文标题:js实现输入框实时搜索

    本文链接:https://www.haomeiwen.com/subject/ihallftx.html