autoComplete

自動完善輸入框

$("#input").autocomplete('option','appendTo',"#catheBuffe");
$("#input").autocomplete('option','delay',500);

放到對象里面

$("#input").autocomplete({
    appendTo:'#catheBuffe',   //掛載元素 如果沒有指定就會去找父級‘ui-front’類 有加這個類上 沒有就加到body上
    autoFocus:true,        //彈出框打開時  自動獲取焦點(diǎn) 默認(rèn)false
    delay:50,              //按鍵發(fā)生時和執(zhí)行搜索之間的延遲 0對本地數(shù)組更具響應(yīng)性,對遠(yuǎn)程數(shù)據(jù)產(chǎn)生大量負(fù)荷 性能較差
    disabled:false,        //是否禁用自動完成功能 默認(rèn)false 
    minLength:1,           //默認(rèn)1 用戶在執(zhí)行搜索前所輸入的數(shù)字 0對本地少量數(shù)據(jù)具有響應(yīng)性
    position:{ my: "left top", at: "left bottom", collision: "none" }, 
    //自動填充菜單對于輸入框的位置 默認(rèn)已經(jīng)寫 也可以指定其它的元素定位
    source: Array/String/Function
    //Array:用于本地數(shù)據(jù)["choose1","choose2"] or [{label:'choose1',value:'value1'},{label:'choose2',value:'value2'}]
       //label 為顯示的數(shù)據(jù) value為選中后填充到輸入框的值 二者也可以指定一個值 相互公用
    //String:指定一個返回JSON數(shù)據(jù)的URL資源 也可以支持跨域
       //需要注意的是 autocomplete不會對結(jié)果過濾 但是可以把輸入?yún)?shù)傳給后臺 在后臺過濾 
       //例:設(shè)置為"http://example.com" 當(dāng)用戶輸入'foo'時,會發(fā)送get請求'http://example.com?term=foo'數(shù)據(jù)本身也可以返回和Array一樣的結(jié)構(gòu)
    //Function 回調(diào) 最靈活,可以把任何數(shù)據(jù)源連接到自動完成,包括JSONP,包含兩個參數(shù)
       //1:request 請求對象,指向當(dāng)前文本的輸入值,request.term為輸入值
       //2:response 回調(diào)，它需要一個參數(shù)：向用戶建議的數(shù)據(jù)。 這些數(shù)據(jù)應(yīng)該根據(jù)所提供的術(shù)語進(jìn)行過濾，
          //并且可以采用上述任何一種簡單的本地數(shù)據(jù)格式。 提供自定義的源回調(diào)來處理請求期間的錯誤是非常重要的。
          //即使遇到錯誤，您也必須始終調(diào)用回復(fù)回調(diào)。 這確保了小部件始終具有正確的狀態(tài) 
})

方法

close();
$( ".selector" ).autocomplete( "close" );
關(guān)閉打開的自動完成菜單,結(jié)合搜索方法有用
destroy();
$( ".selector" ).autocomplete( "destroy" );
完全刪除自動完成功能。 這會將元素返回到它的預(yù)初始狀態(tài)。
disable()
$( ".selector" ).autocomplete( "disable" );
禁用自動完成
enable()
$( ".selector" ).autocomplete( "enable" );
開啟禁用的自動完成
instance()
$( ".selector" ).autocomplete( "instance" );
檢索自動完成的實(shí)例對象。 如果元素沒有關(guān)聯(lián)的實(shí)例，則返回undefined。
option(optionName)
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
獲取當(dāng)前與指定的optionName關(guān)聯(lián)的值。

option( optionName, value )
設(shè)置與指定的optionName關(guān)聯(lián)的自動完成選項的值
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );

search( [value ] )
$( ".selector" ).autocomplete( "search", "" );
如果事件未被取消，則觸發(fā)搜索事件并調(diào)用數(shù)據(jù)源。 
可以通過類似于選擇框的按鈕在單擊時打開建議。
當(dāng)不帶參數(shù)調(diào)用時，使用當(dāng)前輸入的值。
可以使用空字符串調(diào)用，minLength：0顯示所有項目。

事件

//當(dāng)選中值被修改時觸發(fā)
change( event, ui )
$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});
$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );
//當(dāng)菜單被隱藏時被觸發(fā) 不是每一個事件都會觸發(fā)
close( event, ui ) 
$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});
$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );
//自動填充完成創(chuàng)建時觸發(fā)。
create( event, ui )
$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});
$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );
//將焦點(diǎn)移至某個項目（未選中）時觸發(fā)。
focus( event, ui )
//建議菜單打開或更新時觸發(fā)。
open( event, ui )

//搜索完成后觸發(fā)，在顯示菜單之前。 用于本地處理建議數(shù)據(jù)，
//其中不需要自定義源選項回調(diào)。 
//搜索完成后，始終會觸發(fā)此事件，即使由于沒有結(jié)果或禁用自動填充而導(dǎo)致菜單不會顯示。
response( event, ui )

//在執(zhí)行搜索之前觸發(fā)，在滿足minLength和delay之后。 如果取消，則不會啟動請求，也不會建議任何項目。
search( event, ui )

//當(dāng)從菜單中選擇一個項目時觸發(fā)。 默認(rèn)操作是將文本字段的值替換為所選項目的值。
select( event, ui )
$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

完整版的

$('.autoCom-brokers-decl').autocomplete({
            delay: 10,
            minLength: 1,
            autoFocus: true,
            source: function(request, response){
                common.queryBrokers('i', request.term, request.term, function(data){
                    data = data.rows || [];
                    //注意 如果要返回特定的 要自己過濾出合適的數(shù)據(jù)
                    $.each(data, function(){
                        var self = this;
                        self.label = self.brokerExportCode + ',' + self.brokerExportName;
                        self.value = self.brokerExportName;
                    });
                    response(data);
                });
            },
            select: function(event, ui){
                var $this = $(this);
                $this.parent().find('input:hidden').val(ui.item.brokerExportCode);
            },
            change: function(event, ui){
                if(!ui.item){
                    $(this).parent().find('input:hidden').val('');
                }
            },
            messages: {
                noResults: '',
                results: function() {}
            }
        })
            .bind('blur', function(){
                var $this = $(this),
                    value = $this.val(),
                    msg = "請?zhí)顚懻_值";

                if(value != '' ){
                    common.queryBrokers('i', value, value, function(data){
                        if(data.status != 1 || data.rows.length == 0){
                            $.addErrorMsg($this, msg);
                        }
                    });
                }
            });