基于jQuery实现autocomplete输入联想

html

<div id="searchForm"></div>

css

 #searchForm{
        margin: 10px
    }
    .autocomplete-button{
        background: #A9A9A9;
        width: 62px;
        height: 34px;
        color: white;
        font-size: large;
        padding-left: 10px;
    }
    .autocomplete-input{
        width: 182px;
        border: 1px solid #A9A9A9;
        height: 30px;
    }
    .proposal-list{
        width: 182px;
    }

封装好的css，直接放在放在一个文件夹里引入就可以

@CHARSET "UTF-8";

/********************************
A jQuery plugin for search hints

Author: Lorenzo Cioni 
https://github.com/lorecioni
********************************/
.autocomplete-container {
    position: relative;
    width: 100%;
    height: 42px;
   /* margin: 2px auto;*/
}

.autocomplete-input {
    float: left;
    font-family: inherit;
    width: 830px;
    height: 42px;
    line-height: 42px;
    border: 2px #2b61d3 solid;
    background: #fff;
    font-size: 18px;
    padding-left: 10px;
}

.autocomplete-button {
    width: 140px;
    height: 42px;
    line-height: 42px;
    background: #2b61d3 url("../images/search.png") no-repeat center;
    float: left;
    cursor: pointer;
}

.autocomplete-button:hover {
    background-color: #4278ea;
}

.proposal-box {
    position: absolute;
    height: auto;
    /*border-left: 1px solid rgba(0, 0, 0, 0.11);
    border-right: 1px solid rgba(0, 0, 0, 0.11);*/
    z-index: 99;
}

.proposal-list {
    list-style: none;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.proposal-list li {
    width: 100%;
    text-align: left;
    padding-left: 10px;
    font-family: inherit;
    color: black;
    font-size: 16px;
/ / border-bottom : 1 px solid rgba(0, 0, 0, 0.16);
    height: 25px;
    line-height: 25px;
    background-color: rgba(255, 255, 255, 255);
    cursor: pointer;
}

li.proposal.selected {
    background-color: #fcfcfc;
}

封装的js方法，当成autocomplete.js插件引入就好

(function($) {
    $.fn.autocomplete = function(params) {
        //Selections
        var currentSelection = -1;
        var currentProposals = [];

        //Default parameters
        params = $.extend({
            hints: [],
            placeholder: '',
            width: 830,
            height: 42,
            showButton: true,
            buttonText: 'Search',
            onSubmit: function(text){},
            onBlur: function(){}
        }, params);

        //Build messagess
        this.each(function() {
            //Container
            var searchContainer = $('<div></div>')
                .addClass('autocomplete-container')
                .css('width','100%')
                .css('height', params.height );

            //Text input
            var input = $('<input type="text" autocomplete="off" name="query">')
                .attr('placeholder', params.placeholder)
                .addClass('autocomplete-input');


            //Proposals
            var proposals = $('<div></div>')
                .addClass('proposal-box')
                .css('width', params.width)
                .css('top', '42px');
            var proposalList = $('<ul></ul>')
                .addClass('proposal-list');

            proposals.append(proposalList);

            input.keydown(function(e) {
                switch(e.which) {
                    case 38: // Up arrow
                        e.preventDefault();
                        $('ul.proposal-list li').removeClass('selected');
                        if((currentSelection - 1) >= 0){
                            currentSelection--;
                            $( "ul.proposal-list li:eq(" + currentSelection + ")" )
                                .addClass('selected');
                        } else {
                            currentSelection = -1;
                        }
                        break;
                    case 40: // Down arrow
                        e.preventDefault();
                        if((currentSelection + 1) < currentProposals.length){
                            $('ul.proposal-list li').removeClass('selected');
                            currentSelection++;
                            $( "ul.proposal-list li:eq(" + currentSelection + ")" )
                                .addClass('selected');
                        }
                        break;
                    case 13: // Enter
                        if(currentSelection > -1){
                            var text = $( "ul.proposal-list li:eq(" + currentSelection + ")" ).html();
                            input.val(text);
                        }
                        currentSelection = -1;
                        proposalList.empty();
                        params.onSubmit(input.val());
                        break;
                    case 27: // Esc button
                        currentSelection = -1;
                        proposalList.empty();
                        input.val('');
                        break;
                }
            });

            input.bind("change paste keyup", function(e){
                if(e.which != 13 && e.which != 27
                    && e.which != 38 && e.which != 40){
                    currentProposals = [];
                    currentSelection = -1;
                    proposalList.empty();
                    if(input.val() != ''){
                        var word = "^" + input.val() + ".*";
                        proposalList.empty();
                        for(var test in params.hints){
                            if(params.hints[test].match(word)){
                                currentProposals.push(params.hints[test]);
                                var element = $('<li></li>')
                                    .html(params.hints[test])
                                    .addClass('proposal')
                                    .click(function(){
                                        input.val($(this).html());
                                        proposalList.empty();
                                        params.onSubmit(input.val());
                                    })
                                    .mouseenter(function() {
                                        $(this).addClass('selected');
                                    })
                                    .mouseleave(function() {
                                        $(this).removeClass('selected');
                                    });
                                proposalList.append(element);
                            }
                        }
                    }
                }
            });

            input.blur(function(e){
                currentSelection = -1;
                //proposalList.empty();
                params.onBlur();
            });

            searchContainer.append(input);
            searchContainer.append(proposals);

            if(params.showButton){
                //Search button
                var button = $('<div></div>')
                    .addClass('autocomplete-button')
                    /*.css({
                     'height': params.height + 2,
                     'line-height': params.height+ 2 + 'px'
                     })*/
                    .click(function(){
                        proposalList.empty();
                        params.onSubmit(input.val());
                    });
                searchContainer.append(button);
            }

            $(this).append(searchContainer);

        });

        return this;
    };

})(jQuery);

最后再调用此方法，并传入联想的数据就可以了

$(function() { 
        var words = ['a', 'at', 'aaa', 'add', 'af', 'boat', 'bear', 'dog', 'drink', 'elephant', 'fruit','上海农工商银行',];
        $('#searchForm').autocomplete({
            hints: words
        });
        $('.autocomplete-button').html('搜索');
    });