js原生实现模糊查询

 在线演示http://an1234.top/mohuchaxun/

服务器路径已经失效了,感兴趣的同学可以自行复制运行一下。 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="inputvalue">
    <div id="show">

    </div>
</body>
<script>
    // 获取输入框
    let inputText = document.getElementById('inputvalue')

    // 展示搜索结果
    let show = document.getElementById('show')

    // 声明存放查询数据的字符串
    let show_value = ''
    let tips = ['有志者事竟成。', '热爱生活,学会生活,创造生活。', '读书不觉已春深,一寸光阴一寸金。', '要么就努力的向上爬,要么就生活在社会最底层。', '坚强的信心,能使平凡的人做出惊人的事业。', '走的再远,也不要忘记回家的路。', '当上帝赐给你荒野时,就意味着,他要你成为高飞的鹰。', '过去的事情就应该放下,未来的生活才会没有负担。', '你若能作茧自缚,就能破茧成蝶。', '高傲的活着,不如平凡做自己。', '绳锯木断,水滴石穿。', '光阴似箭,日月如梭。', '人生在勤,不索何获。', '穷则变,变则通,通则久。', '百学须先立志。', '工欲善其事,必先利其器。', '人生如梦,一樽还酹江月。', '吾生也有涯,而知也无涯。', '莫等闲,白了少年头,空悲切。', '少壮不努力,老大徒伤悲。', '积土而为山,积水而为海。', '书读百遍,其义自见。', '海阔凭鱼跃,天高任鸟飞。', '穷且益坚,不坠青云之志。', '志当存高远。', '敏而好学,不耻下问。', '一日不书,百事荒芜。', '临渊羡鱼,不如退而结网。', '人而无仪,不死何为。', '言者无罪,闻者足戒。', '他山之石,可以攻玉。', '投我以桃,报之以李。', '满招损,谦受益。', '从善如登,从恶如崩。', '知人者智,自知者明。', '信言不美,美言不信。', '君子坦荡荡,小人长戚戚。', '尺有所短,寸有所长。', '尽信书,不如无书。', '当局者迷,旁观者清。', '会当凌绝顶,一览众山小。', '兼听则明,偏信则暗。', '工欲善其事,必先利其器。', '不以一眚掩大德。', '千经万典,孝悌为先。', '君子藏器于身,待时而动。', '学而不厌,诲人不倦。', '见侮而不斗,辱也。']


    // 初始化搜索结果
    function start_value() {
        for (let i = 0; i < tips.length; i++) {
            let str = '<p>' + (i + 1) + ',' + tips[i] + '</p>'
            show_value += str
        }
        //数据渲染到页面
        show.innerHTML = show_value
    }

    // 调用函数
    start_value()


    // 输入框输入的结果查询
    inputText.oninput = function() {
    //每次输入清空原来的数据
        show_value = ''
        for (let i = 0; i < tips.length; i++) {
            if (tips[i].includes(inputText.value)) {
                let str = '<p>' + (i + 1) + ',' + tips[i] + '</p>'
                show_value += str
            } 
        }
        //数据渲染到页面
        show.innerHTML = show_value
    }
</script>

</html>

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值