2013-08-12 63 views
3

我有以下輸入欄的代碼片段從這裏,我在用以下方法調用AngularJS $scope方法

<input class="search-txt-input" 
     id="partner_name" 
     name="partner_name" 
     title="Partner Name" 
     type="text" 
     autocomplete="off" 
     ng-model="selectedPartner" 
     typeahead="partner as partner.name for partner in retrievePartnerList($viewValue)" 
     typeahead-items="2" 
     typeahead-min-length="3"> 

所以,當我在輸入最少3個字符文本字段,它會觸發一個AJAX調用來訪問retrievePartnerList函數。

而且我的服務器響應速度很慢,所以10個字符7 Ajax調用來在隊列中,一段時間後,我得到一個TimeOutError。

因此,爲了解決這個問題,我試圖找到一種方法,使用它我可以延遲呼叫retrievePartnerList()方法,這樣可以減少AJAX調用,並且可能減輕我的服務器負擔。

所以我不知道我怎麼可以在這裏使用setTimeout()功能。

讓我知道,如果你的任何一個對此有什麼想法。

回答

11

是的,你可以很容易延誤specifing的typeahead-wait-ms屬性發射了匹配。正如該屬性的名稱所暗示的那樣,它將以毫秒爲單位的值並延遲匹配,在向服務器發送請求之前用戶停止鍵入之後等待指定的毫秒數。

這裏是顯示了動作中的一個演示:http://plnkr.co/edit/fHLqDx?p=preview

+0

感謝您的答案,它在上面的js小提琴工作,但不工作在我的代碼不知道可能是什麼原因,我剛剛添加typeahead-wait-ms =「10000 」。但它畢竟是每個鍵的類型 –

+0

我使用0.3.0版本的API,可以觸發後,預輸入等待毫秒在此不加version..Will必須檢查的'預輸入-WAIT - –

+0

@DeanM支持僅在0.5.0版本中添加ms'(在0.4.0中有一些暫定,但0.4.0不能正常工作)。你將不得不升級到0.5.0,以便像我的闖入者那樣工作。 –

2

檢查AngularStrap解決方案:https://github.com/mgcrea/angular-strap/blob/master/src/directives/typeahead.js

OR

它可以這樣很容易做到在javascript:

var autocomplete = $('#searchinput').typeahead().on('keyup', delayRequest); 

function dataRequest() { 
    // api request here 
} 

function delayRequest(event) { 
    if(delayRequest.timeout) { 
     clearTimeout(delayRequest.timeout); 
    } 

    var target = this; 

    delayRequest.timeout = setTimeout(function() { 
     dataRequest.call(target, event); 
    }, 200); // 200ms delay 
} 
+0

感謝您的回答,但我已經看到了這一做法,但對我來說,我不是要求預輸入從js文件的功能,但在視圖中自動觸發它。 。 –

+0

你有沒有檢查'AngularStrap':https://github.com/mgcrea/angular-strap/blob/master/src/directives/typeahead.js – EpokK

+1

我查過這一點,但我不理解這個,因爲我是新來的Angular js框架,並具有其工作的基本IDea。對於我的項目,我使用了http://angular-ui.github.io/bootstrap/,並且使用了Typeahead模塊(在本鏈接結尾處給出了示例) –