带ajax的模糊匹配

最新推荐文章于 2022-09-01 00:14:57 发布

养猪场老板

最新推荐文章于 2022-09-01 00:14:57 发布

阅读量227

点赞数 1

分类专栏： jquery ajax 模糊查询搜索框

本文链接：https://blog.csdn.net/qq_30021357/article/details/89021476

版权

jquery 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

模糊查询

2 篇文章 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"
    }
  ]
}

养猪场老板

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带ajax的模糊匹配

<!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.jq...
复制链接

扫一扫