基于jQuery-autocomplete文本框自动联想补全-侠名风

基于jQuery-autocomplete文本框自动联想补全

基于jQuery文本框自动联想补全特效。这是一款简单使用的jQuery自动完成插件，可定义索引关键词，可设置输入框的宽高，支持搜索回调函数。效果图如下：

grycheng.com

实现的代码。
html代码：

<div id="demo">
<div class="wrapper">
<h3>试试输入"侠名风"</h3>
<div id="search-form"></div>
<div id="message"></div>
</div>
</div>

js代码：

var proposals = ['at', 'boat', 'bear', 'chief', 'dog', 'drink', 'elephant', 'fruit', 'grave', 'hotel', 'illness', 'London', 'motorbike', '侠名风博客', '侠名风jQuery', '侠名风HTML','侠名风grycheng','侠名风JavaScript'];

$(document).ready(function () {
    $('#search-form').autocomplete({
        hints: proposals,
        width: 300,
        height: 30,
        onSubmit: function (text) {
            $('#message').html('Selected: **' + text + '**');
        }
    });
});

查看演示

点击下载

Donate