jquery.autocompleter.js 一款输入框自动完成功能插件，支持缓存和ajax-BFW插件库

jquery.autocompleter.js 一款输入框自动完成功能插件，支持缓存和ajax

jquery.autocompleter.js 一款输入框自动完成功能插件，支持缓存和ajax。

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var colors = [{
            "hex": "#EFDECD", "label": "Almond", "rgb": "(239, 222, 205)"
        }, {
            "hex": "#CD9575", "label": "Antique Brass", "rgb": "(205, 149, 117)"
        }, {
            "hex": "#FDD9B5", "label": "Apricot", "rgb": "(253, 217, 181)"
        }, {
            "hex": "#78DBE2", "label": "Aquamarine", "rgb": "(120, 219, 226)"
        }, {
            "hex": "#87A96B", "label": "Asparagus", "rgb": "(135, 169, 107)"
        }];
        bready(function() {
            use(["jquery.autocompleter", "normalize"], function() {
                $('#nope').autocompleter({
                    highlightMatches: true, source: colors, template: '{{ label }} <span>({{ hex }})</span>', hint: true, empty: false, limit: 5, callback: function(value, index, selected) {
                        if (selected) {
                            $('.icon').css('background-color', selected.hex);
                        }}});
            });
        });
    </script>
    <style>
        body{background:black;font-family:helvetica,arial,sans-serif;text-align:center;color:#fff}main{width:600px;margin:40px auto}h1{font-size:58px}hr{width:50%;border:0;height:1px;margin:40px auto;background:#4d4d4d}a{color:#777}p{color:#c8c7c7;font-size:20px;line-height:24px}p.caption{color:#ccc;font-size:16px}.button{margin:20px auto;display:inline-block;padding:16px 40px;background:#70b3eb;text-decoration:none;font-size:30px;color:#fff;text-shadow:0 -1px 1px rgba(26,62,103,.42);box-shadow:inset 0 0 0 1px #70b3eb,inset 0 1px 0 1px rgba(255,255,255,.5);border-radius:5px;-webkit-transition:.2s ease -webkit-transform;-moz-transition:.2s ease -moz-transform;transition:.2s ease transform}.button:hover{-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);transform:translateY(-3px)}.field{position:relative}.field input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:#000;height:60px;font-size:24px;padding:0 12px;border:0}.field input:focus{outline:0}.icon{position:absolute;right:0;top:0;width:60px;height:60px;background-image:url(../img/icon.png);background-color:#fff}.autocompleter{width:100%;background:#ddd;position:absolute;top:60px;left:0;z-index:100}.autocompleter,.autocompleter-hint{position:absolute}.autocompleter-list{box-shadow:inset 0 0 6px rgba(0,0,0,.1);list-style:none;margin:0;padding:0;text-align:left;-webkit-box-sizing:border-box;box-sizing:border-box}.autocompleter-item-selected{background:#fff}.autocompleter-item{padding:6px 12px;color:#444;font-size:20px;cursor:pointer}.autocompleter-item:hover{background:#dbed8a}.autocompleter-item strong{background:#f9de8f;text-shadow:0 1px 0 #fff}.autocompleter-item span{color:#bbb}.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}
    </style>
</head>
<body>
    <main>
  
        <hr />
        <h1>jQuery Autocompleter</h1>
        <p>请在输入框中输入a</p>
        <div class="field">
            <div class="icon"></div>
            <input type="text" name="nope" id="nope" placeholder="Crayola colors" maxlength="40" />
        </div>
    </main>
</body>
</html>