[search] AngularJS तत्काल खोज पर देरी कैसे करें?


Answers

अद्यतन करें

अब यह पहले से कहीं अधिक आसान है (कोणीय 1.3), बस मॉडल पर एक debounce विकल्प जोड़ें।

<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">

अद्यतन प्लंकर:
http://plnkr.co/edit/4V13gK

NgModelOptions पर प्रलेखन:
https://docs.angularjs.org/api/ng/directive/ngModelOptions

पुरानी विधि:

यहां एक और तरीका है जिसमें कोणीय से परे कोई निर्भरता नहीं है।

आपको एक टाइमआउट सेट करने और पिछले संस्करण के साथ अपनी वर्तमान स्ट्रिंग की तुलना करने की आवश्यकता है, यदि दोनों समान हैं तो यह खोज करता है।

$scope.$watch('searchStr', function (tmpStr)
{
  if (!tmpStr || tmpStr.length == 0)
    return 0;
   $timeout(function() {

    // if searchStr is still the same..
    // go ahead and retrieve the data
    if (tmpStr === $scope.searchStr)
    {
      $http.get('//echo.jsontest.com/res/'+ tmpStr).success(function(data) {
        // update the textarea
        $scope.responseData = data.res; 
      });
    }
  }, 1000);
});

और यह आपके विचार में जाता है:

<input type="text" data-ng-model="searchStr">

<textarea> {{responseData}} </textarea>

अनिवार्य प्लंकर: http://plnkr.co/dAPmwf

Question

मैं AngularJS के लिए नया हूं, और मेरे पास एक प्रदर्शन मुद्दा है जिसे मैं संबोधित नहीं कर सकता। मेरे पास तत्काल खोज है लेकिन यह कुछ हद तक कमजोर है, क्योंकि यह प्रत्येक कीप () पर खोज शुरू करता है।

जे एस:

var App = angular.module('App', []);

App.controller('DisplayController', function($scope, $http) {
$http.get('data.json').then(function(result){
    $scope.entries = result.data;
});
});

HTML:

<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:searchText">
<span>{{entry.content}}</span>
</div>

जेएसओएन डेटा केवल इतना बड़ा नहीं है, केवल 300 केबी, मुझे लगता है कि मुझे जो करना है उसे खोजना है ~ प्रत्येक सेकस्ट्रोक पर कार्रवाई करने के बजाय, उपयोगकर्ता को टाइपिंग समाप्त करने की प्रतीक्षा करने के लिए ~ 1 सेकंड की देरी डालना है। AngularJS यह आंतरिक रूप से करता है, और यहां दस्तावेज़ों और अन्य विषयों को पढ़ने के बाद मुझे एक विशिष्ट उत्तर नहीं मिला।

मैं किसी भी पॉइंटर्स की सराहना करता हूं कि मैं तुरंत खोज में देरी कैसे कर सकता हूं। धन्यवाद।




उन लोगों के लिए जो HTML मार्कअप में कीप / कीडाउन का उपयोग करते हैं। यह घड़ी का उपयोग नहीं करता है।

जे एस

app.controller('SearchCtrl', function ($scope, $http, $timeout) {
  var promise = '';
  $scope.search = function() {
    if(promise){
      $timeout.cancel(promise);
    }
    promise = $timeout(function() {
    //ajax call goes here..
    },2000);
  };
});

एचटीएमएल

<input type="search" autocomplete="off" ng-model="keywords" ng-keyup="search()" placeholder="Search...">



बस यहां पुनर्निर्देशित उपयोगकर्ताओं के लिए:

जैसा कि Angular 1.3 में पेश किया गया है आप https://docs.angularjs.org/api/ng/directive/ngModelOptions विशेषता https://docs.angularjs.org/api/ng/directive/ngModelOptions उपयोग कर सकते हैं:

<input 
       id="searchText" 
       type="search" 
       placeholder="live search..." 
       ng-model="searchText"
       ng-model-options="{ debounce: 250 }"
/>



मैंने इस समस्या को निर्देश के साथ हल किया है कि मूल रूप से यह एक विशेष विशेषता पर वास्तविक एनजी-मॉडल को बांधने के लिए है जो मैं निर्देश में देखता हूं, फिर एक बहस सेवा का उपयोग करके मैं अपने निर्देशक विशेषता को अद्यतन करता हूं, इसलिए उपयोगकर्ता चर पर देखता है वह एनजी मॉडल के बजाय debounce-model से बांधता है।

.directive('debounceDelay', function ($compile, $debounce) {
return {
  replace: false,
  scope: {
    debounceModel: '='
  },
  link: function (scope, element, attr) {
    var delay= attr.debounceDelay;
    var applyFunc = function () {
      scope.debounceModel = scope.model;
    }
    scope.model = scope.debounceModel;
    scope.$watch('model', function(){
      $debounce(applyFunc, delay);
    });
    attr.$set('ngModel', 'model');
    element.removeAttr('debounce-delay'); // so the next $compile won't run it again!

   $compile(element)(scope);
  }
};
});

उपयोग:

<input type="text" debounce-delay="1000" debounce-model="search"></input>

और नियंत्रक में:

    $scope.search = "";
    $scope.$watch('search', function (newVal, oldVal) {
      if(newVal === oldVal){
        return;
      }else{ //do something meaningful }

जेएसफ़िल्ड में डेमो: http://jsfiddle.net/6K7Kd/37/

$ debounce सेवा यहां पाई जा सकती है: http://jsfiddle.net/Warspawn/6K7Kd/

आखिरकार प्रेरित निर्देश http://jsfiddle.net/fctZH/12/




 <input type="text"
    ng-model ="criteria.searchtext""  
    ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
    class="form-control" 
    placeholder="Search" >

अब हम समय के साथ एनजी-मॉडल-विकल्प डिबॉन्स सेट कर सकते हैं और जब धुंधला हो, मॉडल को तुरंत बदलना होगा अन्यथा सहेजने पर देरी पूरी होने पर पुराने मूल्य का होगा।




हर कोई घड़ी का उपयोग क्यों करना चाहता है? आप एक फ़ंक्शन का भी उपयोग कर सकते हैं:

var tempArticleSearchTerm;
$scope.lookupArticle = function (val) {
    tempArticleSearchTerm = val;

    $timeout(function () {
        if (val == tempArticleSearchTerm) {
            //function you want to execute after 250ms, if the value as changed

        }
    }, 250);
}; 





Related