带ajax的模糊匹配

喜欢ヅ旅行 2022-02-24 14:42 238阅读 0赞

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <title></title>
    
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div_main {
                margin: 0 auto;
                width: 300px;
                margin-top: 300px;
            }
            #txt1 {
                width: 100%;
                height: 40px;
                user-select: none;
                outline: none;
                box-sizing: border-box;
                padding: 0 8px;
            }
            #div_items {
                position: relative;
                width: 99%;
                height: auto;
                border: 1px solid #66afe9;
                border-top: 0px;
                overflow: auto;
                display: none;
                list-style-type: none;
            }
            .div_item {
                width: 100%;
                height: 40px;
                margin-top: 1px;
                font-size: 13px;
                line-height: 40px;
                box-sizing: border-box;
                padding: 0 8px;
            }
            .div_item:hover{
                background-color: #1C86EE;
                color: #fff;
            }
        </style>
    </head>
    <body>
    <div id="div_main">
        
        <input type="text" id="txt1" />
        
        <ul id="div_items"></ul>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    
        //隐藏列表框
        $("body").click(function () {
            $("#div_items").hide();
        });
    
        //弹出列表框
        $("#txt1").click(function (e) {
            if($("#txt1").val().length <= 0){
                $("#div_items").hide();
            }else{
                $("#div_items").show();
            }
            e.stopPropagation();
        });
    
        //文本框输入
        $("#txt1").keyup(function () {
            if ($("#txt1").val().length <= 0) {
                $("#div_items").empty();
                $("#div_items").hide();
            }else{
                $.ajax({
                    type:"GET",
                    url:"tsconfig.json",
                    success:function(data){
                        $("#div_items").empty();
                        if(data){
                            var arr = data.namelist;                //后台数据
                            var value = $("#txt1").val();           //输入内容
                            $.each(arr,function (index,val) {
                                if( val.name.indexOf(value) > -1 || val.spell.indexOf(value) > -1 ){
                                    $("#div_items").append("<li class='div_item'>"+ val.name +"</li>")
                                }
                            });
                            if( $(".div_item").length <=0 ){
                                    $("#div_items").append("<li class='div_item'>暂无此数据...</li>")
                            }
                            $("#div_items").show();                 //展示模糊匹配窗口
                        }else{
                            console.log("暂无数据")
                        }
                    },
                    error:function(jqXHR){
                        console.log("数据异常")
                    }
                })
            }
        });
    
        //点击
        $(document).on("click",".div_item", function () {
            $("#txt1").val($(this).text());
        })
    
    //    var tt = "我是一只小狼狗"
    //    var bb = tt.indexOf("狼");      // 查询内容在数据中是否存在  不存在bb=-1 存在bb>-1  bb=0则为首位字符
    //    console.log(bb)
    //
    //    var aa="Hello world!";
    //    var cc = aa.substring(3,7)     // 提取字符下角标区间字符
    //    console.log(cc)
    //
    //    var rr = "asdasd"         // 大小写转换
    //    var ll = rr.toLocaleLowerCase();
    //    console.log(ll)
    
    </script>

json文件格式 ： 主要根据name和spell字段判断模糊窗口显示数据

{
      "namelist": [
        {
          "name": "周杰伦",
          "spell": "zjl"
        },
        {
          "name": "周杰",
          "spell": "zj"
        },
        {
          "name": "林俊杰",
          "spell": "ljj"
        },
        {
          "name": "林宥嘉",
          "spell": "lyj"
        },
        {
          "name": "林妙可",
          "spell": "lmk"
        },
        {
          "name": "唐嫣",
          "spell": "ty"
        },
        {
          "name": "唐家三少",
          "spell": "tjss"
        },
        {
          "name": "唐朝盛世",
          "spell": "tcss"
        },
        {
          "name": "奥迪A4L",
          "spell": "ada4l"
        },
        {
          "name": "奥迪A6L",
          "spell": "ada6l"
        },
        {
          "name": "奥迪A8L",
          "spell": "ada8l"
        },
        {
          "name": "奥迪R8",
          "spell": "adr8"
        },
        {
          "name": "宝马GT",
          "spell": "bmgt"
        }
      ]
    }