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

@date:2015-04-25 15:22:00

bigautocomplete是一款Jquery插件。用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置。

 

先看效果图:

 

 

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

 

一、如何使用:

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

二、参数说明:

$("xxxxx").bigAutocomplete({data:[...],url:"",width:0,callback:{}})
 
 
参数说明
data(可选):
data:格式{data:[{title:null,result:{}},{title:null,result:{}}]}
url和data两个参数必须有一个,且只有一个生效,data优先。
url(可选):url为字符串,用来ajax后台获取数据,返回的数据格式为data参数一样。
width(可选):下拉框的宽度,默认使用输入框宽度。
callback(可选):选中行后按回车或单击时回调的函数,用于返回选中行的其他数据及做一些操作。

 

三、示例:

  1、本地数据:
html代码:
<input type="text" id="tt" value="" class="text" />
 
javascript代码:
$(function(){
$(</span>"#tt"<span style="color: #000000;">).bigAutocomplete({
    width:</span>543<span style="color: #000000;">,
    data:[{title:</span>"中国好声音",result:{ff:"qq"<span style="color: #000000;">}},
    {title:</span>"中国移动网上营业厅"<span style="color: #000000;">},
    {title:</span>"中国银行"<span style="color: #000000;">},
    {title:</span>"中国移动"<span style="color: #000000;">},
    {title:</span>"中国好声音第三期"<span style="color: #000000;">},
    {title:</span>"中国好声音 第一期"<span style="color: #000000;">},
    {title:</span>"中国电信网上营业厅"<span style="color: #000000;">},
    {title:</span>"中国工商银行"<span style="color: #000000;">},
    {title:</span>"中国好声音第二期"<span style="color: #000000;">},
    {title:</span>"中国地图"<span style="color: #000000;">}],
    callback:</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(data){
        alert(data.title);    
    }
});

})

js中data里的result可以不写。

 

2、ajax请求:

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

javascript代码:

$(function(){
    $("#tt").bigAutocomplete({
        width:543,
        url:'http://localhost/test/suggestCom',
        callback:function(data){
            //alert(data.title);    
        }
    });
})

服务端返回数据格式:

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

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

public function suggestCom(){
        $wd = $_POST['keyword'];
        $keywords = $wd;
    </span><span style="color: #800080;">$company_model</span> = M('Company'<span style="color: #000000;">);

    </span><span style="color: #800080;">$res</span> = <span style="color: #800080;">$company_model</span>-&gt;where("name like '%".<span style="color: #800080;">$keywords</span>."%' or abbr like '%".<span style="color: #800080;">$keywords</span>."%' ")-&gt;limit(10)-&gt;<span style="color: #000000;">select();
    </span><span style="color: #0000ff;">foreach</span>(<span style="color: #800080;">$res</span> <span style="color: #0000ff;">as</span> <span style="color: #800080;">$v</span><span style="color: #000000;">){
        </span><span style="color: #800080;">$suggestions</span>[]= <span style="color: #0000ff;">array</span>('title' =&gt; <span style="color: #800080;">$v</span>['name'<span style="color: #000000;">]);
    }

    </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('data' =&gt; <span style="color: #800080;">$suggestions</span><span style="color: #000000;">));
}</span></pre>

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

 

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

jquery.bigautocomplete.js

(function($){
    var bigAutocomplete = new function(){
        this.currentInputText = null;//目前获得光标的输入框(解决一个页面多个输入框绑定自动补全功能)
        this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];//键盘上功能键键值数组
        this.holdText = null;//输入框中原始输入的内容
    <span style="color: #008000;">//</span><span style="color: #008000;">初始化插入自动补全div,并在document注册mousedown,点击非div区域隐藏div</span>
    <span style="color: #0000ff;">this</span>.init = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        $(</span>"body").append("&lt;div id='bigAutocompleteContent' class='bigautocomplete-layout'&gt;&lt;/div&gt;"<span style="color: #000000;">);
        $(document).bind(</span>'mousedown',<span style="color: #0000ff;">function</span><span style="color: #000000;">(event){
            </span><span style="color: #0000ff;">var</span> $target =<span style="color: #000000;"> $(event.target);
            </span><span style="color: #0000ff;">if</span>((!($target.parents().andSelf().is('#bigAutocompleteContent'))) &amp;&amp; (!<span style="color: #000000;">$target.is(bigAutocomplete.currentInputText))){
                bigAutocomplete.hideAutocomplete();
            }
        })
        
        </span><span style="color: #008000;">//</span><span style="color: #008000;">鼠标悬停时选中当前行</span>
        $("#bigAutocompleteContent").delegate("tr", "mouseover", <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            $(</span>"#bigAutocompleteContent tr").removeClass("ct"<span style="color: #000000;">);
            $(</span><span style="color: #0000ff;">this</span>).addClass("ct"<span style="color: #000000;">);
        }).delegate(</span>"tr", "mouseout", <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            $(</span>"#bigAutocompleteContent tr").removeClass("ct"<span style="color: #000000;">);
        });        
        
        
        </span><span style="color: #008000;">//</span><span style="color: #008000;">单击选中行后,选中行内容设置到输入框中,并执行callback函数</span>
        $("#bigAutocompleteContent").delegate("tr", "click", <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
            bigAutocomplete.currentInputText.val( $(</span><span style="color: #0000ff;">this</span>).find("div:last"<span style="color: #000000;">).html());
            </span><span style="color: #0000ff;">var</span> callback_ = bigAutocomplete.currentInputText.data("config"<span style="color: #000000;">).callback;
            </span><span style="color: #0000ff;">if</span>($("#bigAutocompleteContent").css("display") != "none" &amp;&amp; callback_ &amp;&amp;<span style="color: #000000;"> $.isFunction(callback_)){
                callback_($(</span><span style="color: #0000ff;">this</span>).data("jsonData"<span style="color: #000000;">));
                
            }                
            bigAutocomplete.hideAutocomplete();
        })            
        
    }
    
    </span><span style="color: #0000ff;">this</span>.autocomplete = <span style="color: #0000ff;">function</span><span style="color: #000000;">(param){
        
        </span><span style="color: #0000ff;">if</span>($("body").length &gt; 0 &amp;&amp; $("#bigAutocompleteContent").length &lt;= 0<span style="color: #000000;">){
            bigAutocomplete.init();</span><span style="color: #008000;">//</span><span style="color: #008000;">初始化信息</span>

}

        </span><span style="color: #0000ff;">var</span> $<span style="color: #0000ff;">this</span> = $(<span style="color: #0000ff;">this</span>);<span style="color: #008000;">//</span><span style="color: #008000;">为绑定自动补全功能的输入框jquery对象</span>
        
        <span style="color: #0000ff;">var</span> $bigAutocompleteContent = $("#bigAutocompleteContent"<span style="color: #000000;">);
        
        </span><span style="color: #0000ff;">this</span>.config =<span style="color: #000000;"> {
                       </span><span style="color: #008000;">//</span><span style="color: #008000;">width:下拉框的宽度,默认使用输入框宽度</span>
                       width:$<span style="color: #0000ff;">this</span>.outerWidth() - 2<span style="color: #000000;">,
                       </span><span style="color: #008000;">//</span><span style="color: #008000;">url:格式url:""用来ajax后台获取数据,返回的数据格式为data参数一样</span>
                       url:<span style="color: #0000ff;">null</span><span style="color: #000000;">,
                       </span><span style="color: #008000;">/*</span><span style="color: #008000;">data:格式{data:[{title:null,result:{}},{title:null,result:{}}]}
                       url和data参数只有一个生效,data优先</span><span style="color: #008000;">*/</span><span style="color: #000000;">
                       data:</span><span style="color: #0000ff;">null</span><span style="color: #000000;">,
                       </span><span style="color: #008000;">//</span><span style="color: #008000;">callback:选中行后按回车或单击时回调的函数</span>
                       callback:<span style="color: #0000ff;">null</span><span style="color: #000000;">};
        $.extend(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.config,param);
        
        $</span><span style="color: #0000ff;">this</span>.data("config",<span style="color: #0000ff;">this</span><span style="color: #000000;">.config);
        
        </span><span style="color: #008000;">//</span><span style="color: #008000;">输入框keydown事件</span>
        $<span style="color: #0000ff;">this</span>.keydown(<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> 40:<span style="color: #008000;">//</span><span style="color: #008000;">向下键</span>
                
                <span style="color: #0000ff;">if</span>($bigAutocompleteContent.css("display") == "none")<span style="color: #0000ff;">return</span><span style="color: #000000;">;
                
                </span><span style="color: #0000ff;">var</span> $nextSiblingTr = $bigAutocompleteContent.find(".ct"<span style="color: #000000;">);
                </span><span style="color: #0000ff;">if</span>($nextSiblingTr.length &lt;= 0){<span style="color: #008000;">//</span><span style="color: #008000;">没有选中行时,选中第一行</span>
                    $nextSiblingTr = $bigAutocompleteContent.find("tr:first"<span style="color: #000000;">);
                }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
                    $nextSiblingTr </span>=<span style="color: #000000;"> $nextSiblingTr.next();
                }
                $bigAutocompleteContent.find(</span>"tr").removeClass("ct"<span style="color: #000000;">);
                
                </span><span style="color: #0000ff;">if</span>($nextSiblingTr.length &gt; 0){<span style="color: #008000;">//</span><span style="color: #008000;">有下一行时(不是最后一行)</span>
                    $nextSiblingTr.addClass("ct");<span style="color: #008000;">//</span><span style="color: #008000;">选中的行加背景</span>
                    $<span style="color: #0000ff;">this</span>.val($nextSiblingTr.find("div:last").html());<span style="color: #008000;">//</span><span style="color: #008000;">选中行内容设置到输入框中</span>
                    
                    <span style="color: #008000;">//</span><span style="color: #008000;">div滚动到选中的行,jquery-1.6.1 $nextSiblingTr.offset().top 有bug,数值有问题</span>
                    $bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() +<span style="color: #000000;"> $nextSiblingTr.height() );
                    
                }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
                    $</span><span style="color: #0000ff;">this</span>.val(bigAutocomplete.holdText);<span style="color: #008000;">//</span><span style="color: #008000;">输入框显示用户原始输入的值</span>

}

                </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
            </span><span style="color: #0000ff;">case</span> 38:<span style="color: #008000;">//</span><span style="color: #008000;">向上键</span>
                <span style="color: #0000ff;">if</span>($bigAutocompleteContent.css("display") == "none")<span style="color: #0000ff;">return</span><span style="color: #000000;">;
                
                </span><span style="color: #0000ff;">var</span> $previousSiblingTr = $bigAutocompleteContent.find(".ct"<span style="color: #000000;">);
                </span><span style="color: #0000ff;">if</span>($previousSiblingTr.length &lt;= 0){<span style="color: #008000;">//</span><span style="color: #008000;">没有选中行时,选中最后一行行</span>
                    $previousSiblingTr = $bigAutocompleteContent.find("tr:last"<span style="color: #000000;">);
                }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
                    $previousSiblingTr </span>=<span style="color: #000000;"> $previousSiblingTr.prev();
                }
                $bigAutocompleteContent.find(</span>"tr").removeClass("ct"<span style="color: #000000;">);
                
                </span><span style="color: #0000ff;">if</span>($previousSiblingTr.length &gt; 0){<span style="color: #008000;">//</span><span style="color: #008000;">有上一行时(不是第一行)</span>
                    $previousSiblingTr.addClass("ct");<span style="color: #008000;">//</span><span style="color: #008000;">选中的行加背景</span>
                    $<span style="color: #0000ff;">this</span>.val($previousSiblingTr.find("div:last").html());<span style="color: #008000;">//</span><span style="color: #008000;">选中行内容设置到输入框中</span>
                    
                    <span style="color: #008000;">//</span><span style="color: #008000;">div滚动到选中的行,jquery-1.6.1 $$previousSiblingTr.offset().top 有bug,数值有问题</span>
                    $bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() +<span style="color: #000000;"> $previousSiblingTr.height());
                }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
                    $</span><span style="color: #0000ff;">this</span>.val(bigAutocomplete.holdText);<span style="color: #008000;">//</span><span style="color: #008000;">输入框显示用户原始输入的值</span>

}

                </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>
bigAutocomplete.hideAutocomplete(); break; } });
        </span><span style="color: #008000;">//</span><span style="color: #008000;">输入框keyup事件</span>
        $<span style="color: #0000ff;">this</span>.keyup(<span style="color: #0000ff;">function</span><span style="color: #000000;">(event) {
            </span><span style="color: #0000ff;">var</span> k =<span style="color: #000000;"> event.keyCode;
            </span><span style="color: #0000ff;">var</span> ctrl =<span style="color: #000000;"> event.ctrlKey;
            </span><span style="color: #0000ff;">var</span> isFunctionalKey = <span style="color: #0000ff;">false</span>;<span style="color: #008000;">//</span><span style="color: #008000;">按下的键是否是功能键</span>
            <span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i&lt;bigAutocomplete.functionalKeyArray.length;i++<span style="color: #000000;">){
                </span><span style="color: #0000ff;">if</span>(k ==<span style="color: #000000;"> bigAutocomplete.functionalKeyArray[i]){
                    isFunctionalKey </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;
                }
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">k键值不是功能键或是ctrl+c、ctrl+x时才触发自动补全功能</span>
            <span style="color: #0000ff;">if</span>(!isFunctionalKey &amp;&amp; (!ctrl || (ctrl &amp;&amp; k == 67) || (ctrl &amp;&amp; k == 88<span style="color: #000000;">)) ){
                </span><span style="color: #0000ff;">var</span> config = $<span style="color: #0000ff;">this</span>.data("config"<span style="color: #000000;">);
                
                </span><span style="color: #0000ff;">var</span> offset = $<span style="color: #0000ff;">this</span><span style="color: #000000;">.offset();
                $bigAutocompleteContent.width(config.width);
                </span><span style="color: #0000ff;">var</span> h = $<span style="color: #0000ff;">this</span>.outerHeight() - 1<span style="color: #000000;">;
                $bigAutocompleteContent.css({</span>"top":offset.top + h,"left"<span style="color: #000000;">:offset.left});
                
                </span><span style="color: #0000ff;">var</span> data =<span style="color: #000000;"> config.data;
                </span><span style="color: #0000ff;">var</span> url =<span style="color: #000000;"> config.url;
                </span><span style="color: #0000ff;">var</span> keyword_ = $.trim($<span style="color: #0000ff;">this</span><span style="color: #000000;">.val());
                </span><span style="color: #0000ff;">if</span>(keyword_ == <span style="color: #0000ff;">null</span> || keyword_ == ""<span style="color: #000000;">){
                    bigAutocomplete.hideAutocomplete();
                    </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
                }                    
                </span><span style="color: #0000ff;">if</span>(data != <span style="color: #0000ff;">null</span> &amp;&amp;<span style="color: #000000;"> $.isArray(data) ){
                    </span><span style="color: #0000ff;">var</span> data_ = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Array();
                    </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i&lt;data.length;i++<span style="color: #000000;">){
                        </span><span style="color: #0000ff;">if</span>(data[i].title.indexOf(keyword_) &gt; -1<span style="color: #000000;">){
                            data_.push(data[i]);
                        }
                    }
                    
                    makeContAndShow(data_);
                }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(url != <span style="color: #0000ff;">null</span> &amp;&amp; url != ""){<span style="color: #008000;">//</span><span style="color: #008000;">ajax请求数据</span>
                    $.post(url,{keyword:keyword_},<span style="color: #0000ff;">function</span><span style="color: #000000;">(result){
                        makeContAndShow(result.data)
                    },</span>"json"<span style="color: #000000;">)
                }

                
                bigAutocomplete.holdText </span>= $<span style="color: #0000ff;">this</span><span style="color: #000000;">.val();
            }
            </span><span style="color: #008000;">//</span><span style="color: #008000;">回车键</span>
            <span style="color: #0000ff;">if</span>(k == 13<span style="color: #000000;">){
                </span><span style="color: #0000ff;">var</span> callback_ = $<span style="color: #0000ff;">this</span>.data("config"<span style="color: #000000;">).callback;
                </span><span style="color: #0000ff;">if</span>($bigAutocompleteContent.css("display") != "none"<span style="color: #000000;">){
                    </span><span style="color: #0000ff;">if</span>(callback_ &amp;&amp;<span style="color: #000000;"> $.isFunction(callback_)){
                        callback_($bigAutocompleteContent.find(</span>".ct").data("jsonData"<span style="color: #000000;">));
                    }
                    $bigAutocompleteContent.hide();                        
                }
            }
            
        });    
        
                
        </span><span style="color: #008000;">//</span><span style="color: #008000;">组装下拉框html内容并显示</span>
        <span style="color: #0000ff;">function</span><span style="color: #000000;"> makeContAndShow(data_){
            </span><span style="color: #0000ff;">if</span>(data_ == <span style="color: #0000ff;">null</span> || data_.length &lt;=0<span style="color: #000000;"> ){
                </span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
            }
            
            </span><span style="color: #0000ff;">var</span> cont = "&lt;table&gt;&lt;tbody&gt;"<span style="color: #000000;">;
            </span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> i=0;i&lt;data_.length;i++<span style="color: #000000;">){
                cont </span>+= "&lt;tr&gt;&lt;td&gt;&lt;div&gt;" + data_[i].title + "&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;"<span style="color: #000000;">
            }
            cont </span>+= "&lt;/tbody&gt;&lt;/table&gt;"<span style="color: #000000;">;
            $bigAutocompleteContent.html(cont);
            $bigAutocompleteContent.show();
            
            </span><span style="color: #008000;">//</span><span style="color: #008000;">每行tr绑定数据,返回给回调函数</span>
            $bigAutocompleteContent.find("tr").each(<span style="color: #0000ff;">function</span><span style="color: #000000;">(index){
                $(</span><span style="color: #0000ff;">this</span>).data("jsonData"<span style="color: #000000;">,data_[index]);
            })
        }            
                
        
        </span><span style="color: #008000;">//</span><span style="color: #008000;">输入框focus事件</span>
        $<span style="color: #0000ff;">this</span>.focus(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            bigAutocomplete.currentInputText </span>= $<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>.hideAutocomplete = <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        </span><span style="color: #0000ff;">var</span> $bigAutocompleteContent = $("#bigAutocompleteContent"<span style="color: #000000;">);
        </span><span style="color: #0000ff;">if</span>($bigAutocompleteContent.css("display") != "none"<span style="color: #000000;">){
            $bigAutocompleteContent.find(</span>"tr").removeClass("ct"<span style="color: #000000;">);
            $bigAutocompleteContent.hide();
        }            
    }
    
};


$.fn.bigAutocomplete </span>=<span style="color: #000000;"> bigAutocomplete.autocomplete;

})(jQuery)

View Code

jquery.bigautocomplete.css

@charset "utf-8";
.bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:9999 !important;max-height:220px;overflow-x:hidden;overflow-y:auto; text-align:left;}
.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
.bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF;}
.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}
.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}
View Code

css经过改写,以适应某些情况不兼容的bug。

 

页面html代码:

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

<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/bigautocomplete/jquery.bigautocomplete.js?v=2"></script>
<link rel="stylesheet" href="css/bigautocomplete/jquery.bigautocomplete.css" type="text/css" />
<script type="text/javascript">
$(
function(){
$(
"#tt").bigAutocomplete({
width:
543,
url:
'MODULE/test/suggestCom',
callback:
function(data){
//alert(data.title);
}
});

})
</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
{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>bigautocomplete联想输入测试</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