搜索框智能提示(js) - A8源码实例

基本信息

源码名称：搜索框智能提示(js)

源码大小：0.16M

文件格式：.zip

开发语言：ASP

更新时间：2018-11-26

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　

源码介绍

搜索关键字自动补全示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title">
    <meta name="format-detection" content="telephone=no">
    <meta name="robots" content="all">
    <meta id="viewport" name="viewport" content="width=640px,user-scalable=no">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        body {
            width: 640px;
            margin: 0 auto;
            height: auto;
        }
        .head{
            width: 100%;
            padding: 0 25px;
            box-sizing: border-box;
        }
        input{
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        .association {
            height: 600px;
            padding: 0 25px;
        }
        .association ul {
            border: 1px solid #e3e3e3;
            border-top: none;
        }
        .association ul li{
            height: 40px;
            background-color: #fff;
            line-height: 40px;
            border-bottom: 1px dashed #e3e3e3;
            padding-left: 10px;
        }
        .association ul li a{
            display: inline-block;
            color: #666;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="head">
        <input type="text" id="inp">
    </div>
    <div class="association">
        <ul id="ul">

        </ul>
    </div>
<script src="carkey.js"></script>
<script>
    var inp = document.querySelector("#inp");
    var ul = document.querySelector("#ul");
    var chexi = cheliang.chexi;
    var chexing = cheliang.chexing;
    inp.onkeyup = function () {
        var arry = [];
        ul.innerHTML = "";
        var inptxt = inp.value;
        if (inptxt == "") {
            ul.innerHTML = "";
            return false;
        }
        var eng = /^[a-zA-Z] $/;
        console.log(eng.test(inptxt))
        var re = new RegExp(inptxt, "i");
        if (eng.test(inptxt)){
            for (var i = 0; i < chexi.length; i  ) {
                if (chexi[i].key.search(re) == 0) {
                    arry.push({"id": chexi[i].id, "name": chexi[i].name});
                }
                if (arry.length > 9) {
                    break;
                }
            }
            if (arry.length < 10) {
                for (var i = 0; i < chexing.length; i  ) {
                    if (chexing[i].name.search(re) > -1) {
                        arry.push({"id": chexing[i].id, "name": chexing[i].name});
                    }
                    if (arry.length > 9) {
                        break;
                    }
                }
            }
        } else {
            for (var i = 0; i < chexi.length; i  ) {
                if (chexi[i].key.search(re) >= 0) {
                    if (chexi[i].hot == 2) {
                        arry.unshift({"id": chexi[i].id, "name": chexi[i].name});
                    } else {
                        arry.push({"id": chexi[i].id, "name": chexi[i].name});
                    }
                }
                if (arry.length > 9) {
                    break;
                }
            }
            if (arry.length < 10) {
                for (var i = 0; i < chexing.length; i  ) {
                    if (chexing[i].name.search(re) > -1) {
                        arry.push({"id": chexing[i].id, "name": chexing[i].name});
                    }
                    if (arry.length > 9) {
                        break;
                    }
                }
            }
        }
        console.log(arry);
        for (var i = 0; i < arry.length; i  ) {
            console.log(arry[i].id.toString().length);
            var li = document.createElement("li");
            li.innerHTML =  '<a href="/guidedetail.aspx?gid='   arry[i].id   '">'  arry[i].name  '</a>'
            ul.appendChild(li);
        }
    }
</script>
</body>
</html>