JavaScript根据Json数据来做的模糊查询功能

最新推荐文章于 2024-06-21 18:05:42 发布

KELION1234

最新推荐文章于 2024-06-21 18:05:42 发布

阅读量1.3k

点赞数

文章标签： json 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/WhiteM/p/7206547.html

版权

这篇博客介绍了如何利用JavaScript实现类似百度搜索框的模糊查询功能，通过获取页面中的input标签，监听用户输入，结合JSON数据进行匹配，并在用户输入时动态显示匹配结果。当输入不匹配时，模糊搜索框会自动消失。文章详细阐述了实现过程，包括获取input标签、处理JSON数据、创建并更新UI等步骤。

摘要由CSDN通过智能技术生成

类似于百度搜索框的模糊查找功能

需要有有已知数据，实现搜索框输入字符，然后Js进行匹配，然后可以通过鼠标点击显示的内容，把内容显示在搜索框中

当然了，正则只是很简单的字符匹配，不具备多么复杂的判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊查询</title>
    <style>
        *{
    
            list-style: none;
            padding:0;
            margin:0;
        }
        div{
    
            text-align: center;
            padding-top:20px;
        }
        ul{
    
            padding-top:20px;
            width:30%;
            margin:0 50% 0 35%;
        }
        li{
    
            padding:3px;
            border:1px solid silver;
            box-shadow: 1px 1px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="txt">
        <button type="button" id="btn">search</button>
        <ul id="list">

        </ul>
    </div>
    <script>
                
var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oList = document.getElementById('list');

// var newJson = ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓"];


var newJson= ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓"];
//点击事件
oTxt.addEventListener(