autocomplete实现联想输入,自动补全

@date:2015-04-25 16:14:00

jQuery.AutoComplete是一个基于jQuery的自动补全插件。借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器。

特性一览:

    • 支持补全列表的宽度设定。
    • 支持补全列表的最大高度设定。
    • 支持补全列表的行数限制。
    • 支持补全列表的显示位置及方向的设定。
    • 支持自定义匹配规则。
    • 支持匹配文本的渲染。
    • 支持自定义匹配文本的渲染样式。
    • 支持补全列表的样式设定。
    • 支持自定义补全列表项的创建。
    • 支持多种数据源。
    • 支持'json'和'xml'两种数据格式。
    • 支持异步处理。
    • 支持错误调试。
    • 支持jQuery1.7.1+。

 

先看效果图:

 

上图是通过ajax请求服务器返回的数据。下面简单介绍如何使用。

 

一、如何使用:

   引入jquery.autocomplete.js和jquery.autocomplete.css文件到你的页面中。

二、参数说明:

autocomplete的参数比较丰富。这里我不全部进行介绍。大家自行去看api文档。
$("#tt").AutoComplete({
    'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten',     'Eleven', 'Twelve']
});

  data可以是数组,也可以是url,但url返回的数据必须是数组。

 

三、示例:

  1、本地数据:
html代码:
<input type="text" id="tt" value="" class="text" />
 
javascript代码:
$(function(){
$("#tt"<span>).AutoComplete({<span>
    'data':['Cambodia', 'Cameroon', 'Canada', 'Cape-Verde', 'Cayman-Islands', 'Central-African-Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Commonwealth', 'Comoros', 'Costa-Rica', "Cote-d'Ivoire", 'Croatia', 'Cuba', 'Cyprus', 'Czech-Republic']<span><span><span><span><span><span><span><span><span><span>,<span>
});

})

注意data是有引号的。

 

2、ajax请求:

html代码:
<input type="text" id="company" value="" class="text" />

javascript代码:

$(function(){
    $("#tt").AutoComplete({
        'data':'http://localhost/test/suggestCom',
    });
})

服务端返回数据格式:

["\u5317\u4eac\u73b0\u4ee3","\u5317\u4eac\u57ce\u5efa\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u5efa\u5de5\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u9996\u90fd\u65c5\u6e38\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u533b\u836f\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u4e00\u8f7b\u63a7\u80a1\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u91d1\u9685\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u71d5\u4eac\u5564\u9152\u96c6\u56e2\u516c\u53f8","\u5317\u4eac\u5e02\u71c3\u6c14\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8","\u5317\u4eac\u4f4f\u603b\u96c6\u56e2\u6709\u9650\u8d23\u4efb\u516c\u53f8"]

服务端的代码:(以ThinkPHP示例)

public function suggestCom(){
        $wd = $_GET['keyword'];
        $keywords = $wd;
    $company_model = M('Company'<span>);

    $res = $company_model-&gt;where("name like '%".$keywords."%' or abbr like '%".$keywords."%' ")-&gt;limit(10)-&gt;<span>select();
    foreach($res as $v<span>){
        $suggestions[]= $v['name'<span>];
    }

    echo json_encode($suggestions<span>);
}</span></span></span></span></span></span></span></span></pre>

注意默认是GET过来的数据,名称是keyword,返回数据是和本地data一致的。

 

附上jquery.autocomplete.js和jquery.autocomplete.css文件代码:

jquery.autocomplete.js

/*
* jQuery.autocomplete.js (v1.1.2)
* authored by nswish (nswish@gmail.com)
* jQuery 1.7.1+ support
* compatible: ie/chrome/firefox/opera/safari
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function($){
    $.fn.extend({
        'AutoComplete': function(option){
            return this.each(function(){
                if (!(this && this.tagName === 'INPUT' && this.type === 'text')) return;
            </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span><span style="color: #000000;">.controller)
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.controller.setOption(option);
            </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                </span><span style="color: #0000ff;">if</span><span style="color: #000000;">($.isPlainObject(option))
                    </span><span style="color: #0000ff;">this</span>.controller = <span style="color: #0000ff;">new</span> Controller(<span style="color: #0000ff;">this</span><span style="color: #000000;">, option);
            }
        });
    }
});

</span><span style="color: #008000;">//</span><span style="color: #008000;"> ------- Construct Method Here -------------</span>
<span style="color: #0000ff;">var</span> Controller = <span style="color: #0000ff;">function</span><span style="color: #000000;">(input, option){
    </span><span style="color: #0000ff;">this</span>.option = $.extend(<span style="color: #0000ff;">false</span><span style="color: #000000;">, {
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> style</span>
        'width': 320,                                   <span style="color: #008000;">//</span><span style="color: #008000;"> number, string 'auto'</span>
        'maxHeight': <span style="color: #0000ff;">null</span>,                              <span style="color: #008000;">//</span><span style="color: #008000;"> number</span>
        'itemHeight': <span style="color: #0000ff;">null</span>,                             <span style="color: #008000;">//</span><span style="color: #008000;"> number</span>
        'listStyle': 'normal',                          <span style="color: #008000;">//</span><span style="color: #008000;"> string 'normal', 'iconList', 'custom'</span>
        'listDirection': 'down',                        <span style="color: #008000;">//</span><span style="color: #008000;"> string 'down' or 'up'</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> data</span>
        'data': [],                                     <span style="color: #008000;">//</span><span style="color: #008000;"> array, string, function</span>
        'ajaxDataType': 'json',                         <span style="color: #008000;">//</span><span style="color: #008000;"> string 'json' or 'xml'</span>
        'ajaxParams': {},                               <span style="color: #008000;">//</span><span style="color: #008000;"> function, string, object</span>
        'ajaxTimeout': 3000,                            <span style="color: #008000;">//</span><span style="color: #008000;"> number</span>
        'ajaxType': 'GET',                              <span style="color: #008000;">//</span><span style="color: #008000;"> string 'GET' or 'POST'</span>
        'maxItems': 20,                                 <span style="color: #008000;">//</span><span style="color: #008000;"> number</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> event</span>
        'matchHandler': defaultMatchHandler,            <span style="color: #008000;">//</span><span style="color: #008000;"> function</span>
        'emphasisHandler': defaultEmphasisHandler,      <span style="color: #008000;">//</span><span style="color: #008000;"> function</span>
        'createItemHandler': <span style="color: #0000ff;">null</span>,                      <span style="color: #008000;">//</span><span style="color: #008000;"> function</span>
        'beforeLoadDataHandler': <span style="color: #0000ff;">null</span>,                  <span style="color: #008000;">//</span><span style="color: #008000;"> function</span>
        'afterSelectedHandler': <span style="color: #0000ff;">null</span>,                   <span style="color: #008000;">//</span><span style="color: #008000;"> function</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> behavior</span>
        'async': <span style="color: #0000ff;">false</span>,                                 <span style="color: #008000;">//</span><span style="color: #008000;"> bool</span>
        'emphasis': <span style="color: #0000ff;">true</span>,                               <span style="color: #008000;">//</span><span style="color: #008000;"> bool</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> debug</span>
        'onerror': <span style="color: #0000ff;">null</span>                                 <span style="color: #008000;">//</span><span style="color: #008000;"> function</span>

}, option);

    _setupInputView.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">, [input]);
    _setupSearchView.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
};

</span><span style="color: #008000;">//</span><span style="color: #008000;"> ------- Private Method Here -------------</span>
<span style="color: #0000ff;">var</span> _setupInputView = <span style="color: #0000ff;">function</span><span style="color: #000000;">(input){
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">;

    </span><span style="color: #0000ff;">this</span>.inputView =<span style="color: #000000;"> $(input);

    </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.inputView
    .attr(</span>'autocomplete', 'off') <span style="color: #008000;">//</span><span style="color: #008000;"> disable IE's autocomplete feature</span>
    .keyup(<span style="color: #0000ff;">this</span>._keyup = <span style="color: #0000ff;">function</span><span style="color: #000000;">(event){
        </span><span style="color: #0000ff;">switch</span><span style="color: #000000;">(event.keyCode){
            </span><span style="color: #0000ff;">case</span> 13: <span style="color: #008000;">//</span><span style="color: #008000;"> enter</span>
            <span style="color: #0000ff;">case</span> 16: <span style="color: #008000;">//</span><span style="color: #008000;"> shift</span>
            <span style="color: #0000ff;">case</span> 17: <span style="color: #008000;">//</span><span style="color: #008000;"> ctrl</span>
            <span style="color: #0000ff;">case</span> 37: <span style="color: #008000;">//</span><span style="color: #008000;"> left</span>
            <span style="color: #0000ff;">case</span> 38: <span style="color: #008000;">//</span><span style="color: #008000;"> up</span>
            <span style="color: #0000ff;">case</span> 39: <span style="color: #008000;">//</span><span style="color: #008000;"> right</span>
            <span style="color: #0000ff;">case</span> 40: <span style="color: #008000;">//</span><span style="color: #008000;"> down</span>
                <span style="color: #0000ff;">break</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">case</span> 27: <span style="color: #008000;">//</span><span style="color: #008000;"> esc</span>

_emptySearchView.apply(that);
break;
default:
if(that.option.async){
setTimeout(
function(){
_search.apply(that);
},
0);
}
else {
_search.apply(that);
}
}
})
.keydown(
this._keydown = function(event){
switch(event.keyCode){
case 38: // up
_move.apply(that, ['up']);
break;
case 40: // down
_move.apply(that, ['down']);
break;
case 13: // enter
var isSearchViewVisible = that.searchView.is(':visible');
_select.apply(that);
if(isSearchViewVisible)
return false;
break;
}
})
.blur(
this._blur = function(){
$(document).one(
'click', function(){
_emptySearchView.apply(that);
});
});
};

</span><span style="color: #0000ff;">var</span> _setupSearchView = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">;

    </span><span style="color: #0000ff;">this</span>.searchView = $("&lt;div class='ac'&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;"<span style="color: #000000;">)
    .appendTo(document.body)
    .on(</span>'mouseenter', 'li', <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        that.searchView.find(</span>"li.selected").removeClass("selected"<span style="color: #000000;">);
        $(</span><span style="color: #0000ff;">this</span>).addClass('selected'<span style="color: #000000;">);
    })
    .on(</span>'mouseleave', 'li', <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        $(</span><span style="color: #0000ff;">this</span>).removeClass('selected'<span style="color: #000000;">);
    })
    .on(</span>'click', 'li', <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        _select.apply(that);
        _emptySearchView.apply(that);
    })
    .css(</span>'font-size', <span style="color: #0000ff;">this</span>.inputView.css('font-size'<span style="color: #000000;">));

    $(window).resize(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        _locateSearchView.apply(that);
    });
};

</span><span style="color: #0000ff;">var</span> _createItems = <span style="color: #0000ff;">function</span><span style="color: #000000;">(result){
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">,
        container </span>= <span style="color: #0000ff;">this</span>.searchView.find('ul'<span style="color: #000000;">).empty();

    </span><span style="color: #0000ff;">if</span> ($.inArray(<span style="color: #0000ff;">this</span>.option.listStyle, ['normal', 'iconList', 'custom']) == -1<span style="color: #000000;">) {
        </span><span style="color: #0000ff;">throw</span> ['遇到未知的listStyle参数!'<span style="color: #000000;">];
    };

    $.each(result, </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(index, data){
        </span><span style="color: #0000ff;">var</span> item = $("&lt;li&gt;&lt;div&gt;&lt;/div&gt;&lt;/li&gt;").appendTo(container).addClass(that.option.listStyle).data("data", data).find("div"<span style="color: #000000;">);

        </span><span style="color: #0000ff;">switch</span><span style="color: #000000;">(that.option.listStyle){
            </span><span style="color: #0000ff;">case</span> 'normal'<span style="color: #000000;">:
                item.append(</span>"&lt;span&gt;"+data.label+"&lt;/span&gt;"<span style="color: #000000;">);
                </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">case</span> 'iconList'<span style="color: #000000;">:
                </span><span style="color: #0000ff;">var</span> img = $("&lt;img&gt;&lt;/img&gt;").attr('src'<span style="color: #000000;">, data.image);
                item.append($(</span>"&lt;div&gt;&lt;/div&gt;").append(img)).append("&lt;span&gt;"+data.label+"&lt;/span&gt;"<span style="color: #000000;">);
                </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">case</span> 'custom'<span style="color: #000000;">:
                item.append(that.option.createItemHandler.apply(that, [index, data]));
            </span><span style="color: #0000ff;">case</span> 'default'<span style="color: #000000;">:
                </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
        }

        </span><span style="color: #0000ff;">if</span>(that.option.itemHeight &gt; 0<span style="color: #000000;">){
            item.height(that.option.itemHeight).css(</span>'max-height'<span style="color: #000000;">, that.option.itemHeight);
        }
    });
};

</span><span style="color: #0000ff;">var</span> _locateSearchView = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.option.listDirection === 'down'<span style="color: #000000;">){
        </span><span style="color: #0000ff;">var</span> top = <span style="color: #0000ff;">this</span>.inputView.offset().top + <span style="color: #0000ff;">this</span><span style="color: #000000;">.inputView.outerHeight();
    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.option.listDirection === 'up'<span style="color: #000000;">){
        </span><span style="color: #0000ff;">var</span> top = <span style="color: #0000ff;">this</span>.inputView.offset().top - <span style="color: #0000ff;">this</span><span style="color: #000000;">.searchView.outerHeight();
    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        </span><span style="color: #0000ff;">throw</span> '遇到未知的listDirection参数!'<span style="color: #000000;">;
    }

    </span><span style="color: #0000ff;">var</span> left = <span style="color: #0000ff;">this</span><span style="color: #000000;">.inputView.offset().left;
    </span><span style="color: #0000ff;">this</span>.searchView.css("top", top+"px").css("left", left+"px"<span style="color: #000000;">);
};

</span><span style="color: #0000ff;">var</span> _calcWidth = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span>(<span style="color: #0000ff;">this</span>.option.width) === 'string' &amp;&amp; <span style="color: #0000ff;">this</span>.option.width.toLowerCase() === 'auto'<span style="color: #000000;">){
        </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span>.inputView.outerWidth() - 2<span style="color: #000000;">;
    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span>(<span style="color: #0000ff;">this</span>.option.width) === 'number'<span style="color: #000000;">){
        </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span><span style="color: #000000;">.option.width;
    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        </span><span style="color: #0000ff;">throw</span> '遇到未知的width参数!'<span style="color: #000000;">;
    }
}

</span><span style="color: #0000ff;">var</span> _showSearchView = <span style="color: #0000ff;">function</span><span style="color: #000000;">(result){
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">;

    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.option.listDirection === 'up'<span style="color: #000000;">)
        result </span>=<span style="color: #000000;"> result.reverse();

    </span><span style="color: #0000ff;">try</span><span style="color: #000000;">{
        _createItems.apply(that, [result]);</span><span style="color: #008000;">//</span><span style="color: #008000;">console.log("length="+this.searchView.find('li').size());</span>

        <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.option.maxHeight &gt; 0<span style="color: #000000;">){
            </span><span style="color: #0000ff;">this</span>.searchView.css('max-height', <span style="color: #0000ff;">this</span>.option.maxHeight+"px"<span style="color: #000000;">);
            </span><span style="color: #0000ff;">if</span><span style="color: #000000;">($.browser.msie){
                </span><span style="color: #0000ff;">this</span>.searchView.css("height", <span style="color: #0000ff;">this</span>.searchView.height() &gt; <span style="color: #0000ff;">this</span>.option.maxHeight ? <span style="color: #0000ff;">this</span>.option.maxHeight+"px" : "auto"<span style="color: #000000;">);
            }
        }

        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 定位补全列表</span>
        _locateSearchView.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">);

        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 计算并设定补全列表的宽度</span>
        <span style="color: #0000ff;">this</span>.searchView.css("width", _calcWidth.apply(<span style="color: #0000ff;">this</span>)+'px'<span style="color: #000000;">);

    } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(ex) {
        _error.apply(</span><span style="color: #0000ff;">this</span>, [ex+''<span style="color: #000000;">]);
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
    }

    </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.searchView.show();

    _move.apply(</span><span style="color: #0000ff;">this</span>, [<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.listDirection]);
};

</span><span style="color: #0000ff;">var</span> _emptySearchView = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">this</span>.searchView.find('ul'<span style="color: #000000;">).empty();
    </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.searchView.hide();
};

</span><span style="color: #0000ff;">var</span> _move = <span style="color: #0000ff;">function</span><span style="color: #000000;">(dir){
    </span><span style="color: #0000ff;">var</span> selected = <span style="color: #0000ff;">this</span>.searchView.find('li.selected'<span style="color: #000000;">);

    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (selected.size()) 
        </span><span style="color: #0000ff;">var</span> nextSelected = dir === 'up' ?<span style="color: #000000;"> selected.prev() : selected.next();
    </span><span style="color: #0000ff;">else</span>
        <span style="color: #0000ff;">var</span> nextSelected = dir === 'up' ? <span style="color: #0000ff;">this</span>.searchView.find('li').last() : <span style="color: #0000ff;">this</span>.searchView.find('li'<span style="color: #000000;">).first();
    
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(nextSelected.size()){
        </span><span style="color: #0000ff;">this</span>.searchView.find('li').removeClass('selected'<span style="color: #000000;">);
        nextSelected.addClass(</span>"selected"<span style="color: #000000;">);

        </span><span style="color: #0000ff;">var</span> itemHeight =<span style="color: #000000;"> nextSelected.outerHeight();
        </span><span style="color: #0000ff;">var</span> itemTop =<span style="color: #000000;"> nextSelected.position().top;
        </span><span style="color: #0000ff;">if</span>(itemHeight + itemTop &gt; <span style="color: #0000ff;">this</span><span style="color: #000000;">.searchView.height())
            </span><span style="color: #0000ff;">this</span>.searchView.scrollTop(<span style="color: #0000ff;">this</span>.searchView.scrollTop() + itemTop + itemHeight - <span style="color: #0000ff;">this</span><span style="color: #000000;">.searchView.height());
        </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(itemTop &lt; 0<span style="color: #000000;">)
            </span><span style="color: #0000ff;">this</span>.searchView.scrollTop(<span style="color: #0000ff;">this</span>.searchView.scrollTop() +<span style="color: #000000;"> itemTop);
    }
};

</span><span style="color: #0000ff;">var</span> _select = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">,
        selected </span>= <span style="color: #0000ff;">this</span>.searchView.find('li.selected'<span style="color: #000000;">);
    
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (selected.size()) {
        </span><span style="color: #0000ff;">var</span> data = selected.data('data'<span style="color: #000000;">);

        </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.inputView.val(data.value);

        </span><span style="color: #0000ff;">if</span> ($.isFunction(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.afterSelectedHandler)) {
            </span><span style="color: #0000ff;">try</span><span style="color: #000000;">{
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.option.afterSelectedHandler.apply(that, [data]);
            } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) {
                _error.apply(</span><span style="color: #0000ff;">this</span>, ['调用afterSelectedHandler错误:'+<span style="color: #000000;">e]);
                </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
            }
        }

        _emptySearchView.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
    }
};

</span><span style="color: #0000ff;">var</span> _ajaxSend = <span style="color: #0000ff;">function</span><span style="color: #000000;">(keyword){
    jQuery.support.cors </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">,
        data </span>=<span style="color: #000000;"> [],
        ajaxOption </span>=<span style="color: #000000;"> {
            </span>'async': <span style="color: #0000ff;">false</span><span style="color: #000000;">,
            </span>'dataType'<span style="color: #000000;">: that.option.ajaxDataType,
            </span>'type'<span style="color: #000000;">: that.option.ajaxType,
            </span>'timeout': <span style="color: #0000ff;">this</span><span style="color: #000000;">.option.ajaxTimeout,
            </span>'success': <span style="color: #0000ff;">function</span><span style="color: #000000;">(theData, textStatus, jqXHR){
                </span><span style="color: #0000ff;">if</span> (that.option.ajaxDataType === 'xml'<span style="color: #000000;">) {
                    $(theData).find(</span>'item').each(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                        </span><span style="color: #0000ff;">var</span> item =<span style="color: #000000;"> {
                            </span>'value': $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).text(),
                            </span>'label': $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).text()
                        };

                        </span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i=0; i&lt;<span style="color: #0000ff;">this</span>.attributes.length; i++<span style="color: #000000;">) {
                            </span><span style="color: #0000ff;">var</span> key = <span style="color: #0000ff;">this</span><span style="color: #000000;">.attributes[i].nodeName,
                                value </span>= <span style="color: #0000ff;">this</span><span style="color: #000000;">.attributes[i].nodeValue;

                            item[key] </span>=<span style="color: #000000;"> value;
                        };

                        data.push(item);
                    });
                } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(that.option.ajaxDataType === 'json'<span style="color: #000000;">) {
                    data </span>=<span style="color: #000000;"> theData;
                } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                    </span><span style="color: #0000ff;">throw</span> '遇到未知的ajaxDataType参数!'<span style="color: #000000;">;
                }
            },
            </span>'error': <span style="color: #0000ff;">function</span><span style="color: #000000;">(jqXHR, textStatus, errorThrown){
                </span><span style="color: #0000ff;">throw</span><span style="color: #000000;"> errorThrown;
            }
        };

    </span><span style="color: #0000ff;">if</span> ($.isPlainObject(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.ajaxParams)) {
        ajaxOption[</span>'data'] = $.extend(<span style="color: #0000ff;">false</span>, {'keyword': keyword}, <span style="color: #0000ff;">this</span><span style="color: #000000;">.option.ajaxParams);
    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> ($.isFunction(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.ajaxParams)) {
        ajaxOption[</span>'data'] = $.extend(<span style="color: #0000ff;">false</span>, {'keyword': keyword}, <span style="color: #0000ff;">this</span>.option.ajaxParams.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, [keyword]));
    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">typeof</span>(<span style="color: #0000ff;">this</span>.option.ajaxParams) === 'string'<span style="color: #000000;">) {
        ajaxOption[</span>'data'] = "keyword=" + keyword + "&amp;" + <span style="color: #0000ff;">this</span><span style="color: #000000;">.option.ajaxParams;
    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        </span><span style="color: #0000ff;">throw</span> '遇到未知的ajaxParams参数!'<span style="color: #000000;">;
    }

    $.ajax(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.option.data, ajaxOption);

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> data;
};

</span><span style="color: #0000ff;">var</span> _search = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">var</span> that = <span style="color: #0000ff;">this</span><span style="color: #000000;">,
        keyword </span>= <span style="color: #0000ff;">this</span><span style="color: #000000;">.inputView.val(),
        data </span>=<span style="color: #000000;"> [],
        loadDataFlag </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">,
        result </span>=<span style="color: #000000;"> [];

    </span><span style="color: #0000ff;">if</span>($.trim(keyword).length == 0<span style="color: #000000;">){
        _emptySearchView.apply(that);
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
    }

    </span><span style="color: #008000;">//</span><span style="color: #008000;"> invoke beforeLoadDataHandler if exists</span>
    <span style="color: #0000ff;">if</span> ($.isFunction(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.beforeLoadDataHandler)) {
        </span><span style="color: #0000ff;">try</span><span style="color: #000000;">{
            loadDataFlag </span>= <span style="color: #0000ff;">this</span>.option.beforeLoadDataHandler.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, [keyword]);
        } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) {
            _error.apply(</span><span style="color: #0000ff;">this</span>, ['调用beforeLoadDataHandler错误:'+<span style="color: #000000;">e]);
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
        }
    }

    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (loadDataFlag){
        </span><span style="color: #0000ff;">if</span> ($.isArray(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.data)) {
            data </span>= <span style="color: #0000ff;">this</span><span style="color: #000000;">.option.data;
        } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> ($.isFunction(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.data)) {
            </span><span style="color: #0000ff;">try</span><span style="color: #000000;">{
                data </span>= <span style="color: #0000ff;">this</span>.option.data.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, [keyword]);
            } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) {
                _error.apply(</span><span style="color: #0000ff;">this</span>, ['调用data错误:'+<span style="color: #000000;">e]);
                </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
            }
        } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">typeof</span>(<span style="color: #0000ff;">this</span>.option.data) === 'string'<span style="color: #000000;">) {
            </span><span style="color: #0000ff;">try</span><span style="color: #000000;">{
                data </span>= _ajaxSend.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, [keyword]);
            } </span><span style="color: #0000ff;">catch</span><span style="color: #000000;">(e) {
                _error.apply(</span><span style="color: #0000ff;">this</span>, ['Ajax错误:'+<span style="color: #000000;">e]);
                </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
            }
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            _error.apply(</span><span style="color: #0000ff;">this</span>, ['遇到未知的data参数!'<span style="color: #000000;">]);
            </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
        }
    }

    $.each(data, </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(index, value){
        </span><span style="color: #0000ff;">if</span>(that.option.maxItems &gt; 0 &amp;&amp; result.length &gt;=<span style="color: #000000;"> that.option.maxItems)
            </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;

        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">($.isPlainObject(value)){
            </span><span style="color: #0000ff;">var</span> item = $.extend(<span style="color: #0000ff;">false</span><span style="color: #000000;">, {}, value);
        } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span>(value) === 'string'<span style="color: #000000;">) {
            </span><span style="color: #0000ff;">var</span> item = {'label': value, 'value': value, 'image'<span style="color: #000000;">: value};
        } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
            _error.apply(that, [</span>'数据源Item类型错误!'<span style="color: #000000;">]);
            </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
        }

        </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(that.option.matchHandler.apply(that, [keyword, item])){
            result.push(item);
        }
    });

    </span><span style="color: #0000ff;">if</span>(keyword == <span style="color: #0000ff;">this</span><span style="color: #000000;">.inputView.val()){
        </span><span style="color: #0000ff;">if</span>(result.length &gt; 0<span style="color: #000000;">)
            _showSearchView.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">, [result]);
        </span><span style="color: #0000ff;">else</span><span style="color: #000000;">
            _emptySearchView.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
    }
};

</span><span style="color: #0000ff;">var</span> _error = <span style="color: #0000ff;">function</span><span style="color: #000000;">(msg){
    </span><span style="color: #0000ff;">if</span>($.isFunction(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.onerror)){
        </span><span style="color: #0000ff;">this</span>.option.onerror.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, [msg]);
    }
};

</span><span style="color: #008000;">//</span><span style="color: #008000;"> ------- Public Method Here -------------</span>
Controller.prototype.setOption = <span style="color: #0000ff;">function</span><span style="color: #000000;">(option){
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> ($.isPlainObject(option)) {
        </span><span style="color: #0000ff;">this</span>.option = $.extend(<span style="color: #0000ff;">false</span>, <span style="color: #0000ff;">this</span><span style="color: #000000;">.option, option);
    } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">typeof</span>(option) === 'string'<span style="color: #000000;">){
        </span><span style="color: #0000ff;">switch</span><span style="color: #000000;">(option){
            </span><span style="color: #0000ff;">case</span> 'destroy'<span style="color: #000000;">:
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.destroy();
                </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">case</span> 'show'<span style="color: #000000;">:
                </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.show();
                </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">default</span><span style="color: #000000;">:
                _error.apply(</span><span style="color: #0000ff;">this</span>, ['未知的AutoComplete参数!'<span style="color: #000000;">]);
                </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
        }
    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        _error.apply(</span><span style="color: #0000ff;">this</span>, ['未知的AutoComplete参数类型!'<span style="color: #000000;">]);
        </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
    }
};

Controller.prototype.destroy </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.searchView.remove();
    </span><span style="color: #0000ff;">this</span>.inputView.unbind('keyup', <span style="color: #0000ff;">this</span>._keyup).unbind('keydown', <span style="color: #0000ff;">this</span>._keydown).unbind('blur', <span style="color: #0000ff;">this</span><span style="color: #000000;">._blur);
    </span><span style="color: #0000ff;">delete</span> <span style="color: #0000ff;">this</span>.inputView.get(0<span style="color: #000000;">).controller;
};

Controller.prototype.show </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.async){
        setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            _search.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
        }, </span>0<span style="color: #000000;">);
    } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        _search.apply(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">);
    }    
};

</span><span style="color: #008000;">//</span><span style="color: #008000;"> ------- Default Handler Function Here -------------</span>
<span style="color: #0000ff;">var</span> defaultMatchHandler = <span style="color: #0000ff;">function</span><span style="color: #000000;">(keyword, data){
    </span><span style="color: #0000ff;">var</span> regex = RegExp(keyword.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"), 'i'<span style="color: #000000;">);
    </span><span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.option.emphasis &amp;&amp; $.isFunction(<span style="color: #0000ff;">this</span><span style="color: #000000;">.option.emphasisHandler))
        </span><span style="color: #0000ff;">this</span>.option.emphasisHandler.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, [keyword, data]);
    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> regex.test(data.value);
};

</span><span style="color: #0000ff;">var</span> defaultEmphasisHandler = <span style="color: #0000ff;">function</span><span style="color: #000000;">(keyword, data){
    </span><span style="color: #0000ff;">var</span> regex = RegExp("("+keyword.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1")+")", 'ig'<span style="color: #000000;">);
    data.label </span>= data.label.replace(regex, "&lt;em&gt;$1&lt;/em&gt;"<span style="color: #000000;">);
};

})(jQuery);

View Code

jquery.autocomplete.css

/*
* jQuery.autocomplete.css (v1.1.0)
* authored by nswish (nswish@gmail.com)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
div.ac { 
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    position: absolute;
    display: none;
    overflow: auto;
}

div.ac > ul

{
margin
: 0px;
padding
: 0px;
}

div.ac > ul > li

{
margin
: 0px;
list-style-type
: none;
background-color
: white;
word-break
: break-all;
font-family
: helvetica, arial, "Courier New", sans-serif;
}

div.ac > ul > li > div

{
display
: table-row;
width
: 100%;
}

div.ac > ul > li > div em

{
background-color
: #B0E2FF;
font-style
: normal;
}

div.ac > ul > li.normal

{
padding
: 2px 0px 2px 2px;
}

div.ac > ul > li.normal > div > span

{
display
: table-cell;
vertical-align
: middle;
}

div.ac > ul > li.iconList

{
padding
: 0px 0px 0px 2px;
}

div.ac > ul > li.iconList > div > div

{
display
: table-cell;
vertical-align
: middle;
padding-right
: 5px;
}

div.ac > ul > li.iconList > div > div > img

{
display
: table;
display
: table-cell\9;
}

div.ac > ul > li.iconList > div > span

{
display
: table-cell;
vertical-align
: middle;
}

div.ac > ul > li.selected

{
background-color
: #DCDCDC;
}

View Code

页面html代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现仿搜索引擎文本框自动补全插件 - autocomplete</title>

<script src="PUBLIC/dwz/js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="PUBLIC/autocomplete/jquery.autocomplete.js?v=2"></script>
<link rel="stylesheet" href="PUBLIC/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript">
$(
function(){

$(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#tt</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).AutoComplete({
    </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">data</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">__MODULE__/test/suggestCom2</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
});

})
</script>

</head>
<body>

<style type="text/css">
*
{margin:0;padding:0;list-style-type:none;}
a,img
{border:0;}
.demo
{width:720px;margin:30px auto;}
.demo h2
{font-size:16px;color:#3366cc;height:30px;}
.demo li
{float:left;}
.text,.button
{background:url(http://su.bdimg.com/static/superpage/img/spis_031ddf34.png) no-repeat;}
.text
{width:529px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
.button
{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
</style>

<div class="demo">
<h2>autocomplete联想输入测试</h2>
<form action="" method="post" name="searchform" id="searchform" class="searchinfo">
<ul>
<li><input type="text" id="tt" value="" class="text" /></li>
<li><input type="submit" value="搜索" class="button" /></li>
</ul>
</form>
</div>

</body>
</html>

View Code

 

Build by Loppo 0.6.14