搜索框 展現相關搜索內容列表，及延遲改進(仿百度)

實現的功能以下圖：

DOM代碼同樣：

<fieldset>
　　<legend>模擬百度搜索-$http</legend>
　　<div>
　　　　<input type="text" ng-model = 'wd' ng-keyup = 'search(wd)'>   //鍵盤擡起觸發事件
　　　　<input type="button" value="搜索" ng-click = 'search(wd)'>    //點擊按鈕一樣觸發事件
　　　　<ul style = "height:200px;border: 1px solid red;width:300px;">     //顯示搜索結果內容
　　　　　　<li ng-repeat = "data in datalist">{{data}}</li>
　　　　</ul>
　　</div>
</fieldset>

 

版本一：（low）

說明： 在每次按鍵擡起都會觸發請求（好比，輸入 angular，會觸發7次搜索結果），形成浪費，影響加載速度。

$scope.search = function(wd){
　　$http({
　　　　method:'JSONP',
　　　　url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd + '&cb=JSON_CALLBACK',
　　}).success(function(data){
　　　　$scope.datalist = data.s;
　　})
}

 版本一：（高大上）

說明：短暫延時，在連續快速輸入（<500ms）時，不會觸發請求，停頓時間>500ms時，纔會一次性發送請求。

$scope.timer = null;
$scope.search = function(wd){
　　$timeout.cancel($scope.timer); //聯繫快速輸入時，取消定時器，不觸發
　　$scope.timer = $timeout(function(){   //延時發送請求
	$http({
	　　method:'JSONP',
	　　url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd + '&cb=JSON_CALLBACK',
	}).success(function(data){
	　　$scope.datalist = data.s;
	})
　　}, 500);	}