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





filter timeout delay (12)


एक और समाधान मॉडल अद्यतन के लिए देरी कार्यक्षमता जोड़ना है। सरल निर्देश एक चाल करना प्रतीत होता है:

app.directive('delayedModel', function() {
    return {
        scope: {
            model: '=delayedModel'
        },
        link: function(scope, element, attrs) {

            element.val(scope.model);

            scope.$watch('model', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.val(scope.model);        
                }
            });

            var timeout;
            element.on('keyup paste search', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    scope.model = element[0].value;
                    element.val(scope.model);
                    scope.$apply();
                }, attrs.delay || 500);
            });
        }
    };
});

उपयोग:

<input delayed-model="searchText" data-delay="500" id="searchText" type="search" placeholder="live search..." />

तो आप ng-model delayed-model के स्थान पर delayed-model उपयोग करें और वांछित data-delay को परिभाषित data-delay

डेमो: http://plnkr.co/edit/OmB4C3jtUD2Wjq5kzTSU?p=preview

मैं 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 यह आंतरिक रूप से करता है, और यहां दस्तावेज़ों और अन्य विषयों को पढ़ने के बाद मुझे एक विशिष्ट उत्तर नहीं मिला।

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




मुझे लगता है कि जेसन को प्रीलोड करना या इसे $dirty पर लोड करना सबसे आसान तरीका है और फिर फ़िल्टर खोज बाकी की देखभाल करेगी। यह आपको अतिरिक्त http कॉल और प्रीलोड किए गए डेटा के साथ बहुत तेज़ बचाएगा। मेमोरी चोट लगी है, लेकिन इसके लायक है।




कोणीय 1.3 में एनजी-मॉडल-विकल्प डिबॉन्स होंगे, लेकिन तब तक, आपको जोसु इब्रारा जैसे टाइमर का उपयोग करना होगा। हालांकि, अपने कोड में उन्होंने प्रत्येक कुंजी प्रेस पर एक टाइमर लॉन्च किया। साथ ही, वह सेटटाइमआउट का उपयोग कर रहा है, जब एंगुलर में $ टाइमआउट का उपयोग करना पड़ता है या सेटटाइमआउट के अंत में $ लागू होता है।




 <input type="text"
    ng-model ="criteria.searchtext""  
    ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
    class="form-control" 
    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 }"
/>



उन लोगों के लिए जो 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...">



(एक कोणीय 1.3 समाधान के लिए नीचे जवाब देखें।)

यहां मुद्दा यह है कि जब भी मॉडल में परिवर्तन होता है तो खोज निष्पादित होगी, जो कि इनपुट पर प्रत्येक कुंजीपटल कार्रवाई है।

ऐसा करने के लिए क्लीनर तरीके होंगे, लेकिन बाध्यकारी स्विच करने का सबसे आसान तरीका यह होगा कि आपके पास आपके कंट्रोलर के अंदर परिभाषित $ स्कोप प्रॉपर्टी है जिस पर आपका फ़िल्टर चल रहा है। इस तरह आप नियंत्रित कर सकते हैं कि कितनी बार उस $ स्कोप चर अद्यतन किया जाता है। कुछ इस तरह:

जे एस:

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

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

    // This is what you will bind the filter to
    $scope.filterText = '';

    // Instantiate these variables outside the watch
    var tempFilterText = '',
        filterTextTimeout;
    $scope.$watch('searchText', function (val) {
        if (filterTextTimeout) $timeout.cancel(filterTextTimeout);

        tempFilterText = val;
        filterTextTimeout = $timeout(function() {
            $scope.filterText = tempFilterText;
        }, 250); // delay 250 ms
    })
});

HTML:

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



कोणीय 1.3 में मैं यह करूँगा:

HTML:

<input ng-model="msg" ng-model-options="{debounce: 1000}">

नियंत्रक:

$scope.$watch('variableName', function(nVal, oVal) {
    if (nVal !== oVal) {
        myDebouncedFunction();
    }
});

असल में आप myDebouncedFunction () को चलाने के लिए कोणीय को बता रहे हैं, जब संदेश स्कोप परिवर्तनीय परिवर्तन होते हैं। गुण ng-model-options = "{debounce: 1000}" सुनिश्चित करता है कि संदेश केवल एक बार एक बार अपडेट हो सकता है।




अद्यतन करें

अब यह पहले से कहीं अधिक आसान है (कोणीय 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




मैंने इस समस्या को निर्देश के साथ हल किया है कि मूल रूप से यह एक विशेष विशेषता पर वास्तविक एनजी-मॉडल को बांधने के लिए है जो मैं निर्देश में देखता हूं, फिर एक बहस सेवा का उपयोग करके मैं अपने निर्देशक विशेषता को अद्यतन करता हूं, इसलिए उपयोगकर्ता चर पर देखता है वह एनजी मॉडल के बजाय 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/




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

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);
}; 



सभी महान उत्तरों के लिए धन्यवाद, मुझे एक समाधान मिला जो मेरी आवश्यकताओं के अनुरूप है।

Handler myHandler = new DoSomething();
Message m = new Message();
m.obj = c;//passing a parameter here
myHandler.sendMessageDelayed(m, 1000);

class DoSomething extends Handler {
    @Override
    public void handleMessage(Message msg) {
      MyObject o = (MyObject) msg.obj;
      //do something here
    }
}






search filter angularjs timeout delay