jquery.custom自動補全插件

一、引入所需的js插件

<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>

二、html部分

<input id="conSearch" type="search" placeholder="搜索：用戶/科室/討論組" original-title="">

三、js部分

$('#conSearch').autocomplete({minLength: 1, source: function(search, response) {
            $.get('ajax/getSearchRange.php', { search: search.term }, function(result) {
                if (result.status == 'success' && result.data.length > 0) {
                    $( "#conSearch" ).autocomplete( "option", "autoFocus", true );
                    response(result.data);
                } else {
                    $( "#conSearch" ).autocomplete( "option", "autoFocus", false );
                    response(['No search results...']);
                }
            });
        },
        focus: function(event, focused) {
            event.preventDefault();
        },
        select: function(event, selected) {
            event.stopPropagation();

            if(!selected.item.conWith){
                return false;
            }
            var conWith = selected.item.conWith;
            var conType = selected.item.conType;
            return false;
        }
    })
        // customize internal _renderItem function to display groups and users differently
        .data("ui-autocomplete")._renderItem = function( ul, item ) {
        var insert = $( "<a>" );
        var text = "";
        if(item.conType == 'user'){
            text = item.conWith  + '(user)';
        }else if(item.conType == "group"){
            text = item.conWith + '(group)';
        }else if(item.conType == "tempgroup"){
            text = item.conWith + '(tempgroup)';
        }else{
            text = item.value;
        }

        insert.text( text );
        if(item.conType == 'group' || item.conType == 'tempgroup') {
            insert = insert.wrapInner('<strong></strong>');
        }
        return $( "<li>" )
            .addClass(item.conType)
            .append( insert )
            .appendTo( ul );
    };

demo下載地址 http://download.csdn.net/detail/jiangjundriver/9872416