php + jQuery自动完成插件autocompleter

时间：2023-03-10 00:47:39
php + jQuery自动完成插件autocompleter

autocompleter是一个简单的，容易的，可定制的自动完成功能插件，支持缓存。

1、引用脚本

<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="./jquery.autocompleter.js"></script>

2、添加样式

/**

 * 自动提示样式 Simplecomplete

 */

.autocompleter {

    width: 100%;

    background: #E1E7ED;

    top: 35px;

    left:;

    z-index:;

    border-radius: 5px;

}

.autocompleter,

.autocompleter-hint {

    position: absolute;

}

.autocompleter-list {

    box-shadow: inset 0px 0px 6px rgba(0,0,0,0.1);

    list-style: none;

    text-align: left;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 9px;

}

.autocompleter-list>li {

    padding-left:19px;

    line-height: 38px;

    border-radius: 9px;

}

.autocompleter-item-selected {

    background: #ffffff;

}

.autocompleter-item {

    padding: 6px 12px;

    color: #444444;

    font-size: 15px;

    cursor: pointer;

}

.autocompleter-item:hover {

    background: grey;

}

.autocompleter-item strong {

    background: #f9de8f;

    text-shadow: 0 1px 0 #ffffff;

}

.autocompleter-item span {

    color: #bbbbbb;

}

.autocompleter-hint {

    color: #ccc;

    text-align: left;

    top: -56px;

    font-weight:;

    left:;

    width: 100%;

    padding: 12px 12px 12px 13px;

    font-size: 24px;

    display: none;

}

.autocompleter-hint span {

    color: transparent;

}

.autocompleter-hint-show {

    display: block;

}

.autocompleter-closed {

    display: none;

}

也可以引用 jquery.autocompleter.css ，作相应处理；

3、定义你的autocompleter：

$(function () {

    $('input').autocompleter({ source: 'path/to/get_data_request' });

});

或用于本地JSON来源：

var data = [

    { "value": "1", "label": "one" },

    { "value": "2", "label": "two" },

    { "value": "3", "label": "three" }

];

$(function () {

    $('input').autocompleter({ source: data });

});

4、完整代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>冷暖自知一抹茶ck</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="./css/global.css">

    <script type="text/javascript" src="./jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="./jquery.autocompleter.js"></script>

</head>

<body>

<div class="nav">

    123456789

</div>

<div class="search">

    <div class="search_text" style="">

        <input id="searchtxt" class="bantxt" name="searchtxt" placeholder="搜索关键字.." style="border: 1px solid rgb(44, 44, 44);" maxlength="60" type="text" />

        <button id="seobut" class="btn banbutt" type="button">

            <i class="fa fa-search"></i>

        </button>

    </div>

</div>

<script>

    $(function () {

        $('#searchtxt').autocompleter({

            highlightMatches: true,        // marker for autocomplete matches

            source: "server.php",    // object to local or url to remote search

            template: '{{ label }} <span>({{ id }})</span>',    // custom template

            //template: '<span id="{{ id }}">{{ label }}</span>',

            empty: false,    // abort source if empty field[如果数据为空,阻止检索]

            limit: 10,    // max results[最多查询显示条数]

            cache: true,

            callback: function (value, index, selected) {

                if (selected) {

                    //$('.icon').css('background-color', selected.hex);

                    $('#searchtxt').attr("data-value",selected.id);

                }

            }

        });

        $("#seobut").click(function() {

            var seo = $("#searchtxt").val();

            if (seo.length > 1) {

                window.location.href = "search?seo=" + seo;

            }

        });

        $('#searchtxt').bind('keypress',

        function(event) {

            if (event.keyCode == "13") {

                var seo = $("#searchtxt").val();

                if (seo.length > 1) {

                    window.location.href = "search?seo=" + seo;

                }

            }

        });

    });

</script>

<div class="container" style="width:100%;height:auto;">

    <div style="width:1050px;height:auto;margin:0 auto;">

        <div style="width:60%;height:900px;background:yellow;float:left;margin:2%;padding:2% 1%;">

            <div style="">123456</div>

            <div style="">789456</div>

        </div>

        <div style="width:26%;height:900px;background:pink;float:right;margin-left:6%;margin:2%;padding:2% 1%">

            <div style="">123456</div>

            <div style="">789456</div>

        </div>

        <div style="clear:both;"></div>

    </div>

</div>

<div style="width:100%;text-align:center;">

    <p>冷暖自知一抹茶ck</p>

</div>

</body>

</html>

参考资料：https://github.com/ArtemFitiskin/jquery-autocompleter

打包文件：链接：http://pan.baidu.com/s/1o8Ivgtc 密码：ivc7

相关文章