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: 0;
    z-index: 100;
    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: 400;
    left: 0;
    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

posted @ 2016-12-02 15:18  冷暖自知一抹茶ck  阅读(809)  评论(0)  编辑  收藏  举报