angularJs में एक खोज टेक्स्ट बॉक्स प्रोग्राम करने का सही तरीका

Question

मेरे एप्लिकेशन के कई हिस्सों में एक बहुत ही आम विशेषता एक खोज बॉक्स है जो एक स्ट्रिंग स्वीकार करता है और फिर स्ट्रिंग के आधार पर एक तालिका फ़िल्टर करता है।

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

डेटा के सॉर्टिंग को AngularJs फ़िल्टर का उपयोग करके किया जाएगा। हालांकि फ़िल्टर को अपडेट करने से पहले मुझे विश्वास है कि हमें पहले यह समझना होगा कि उपयोगकर्ता इनपुट में प्रवेश कर चुका है और अब परिणामों की प्रतीक्षा कर रहा है।

तो मैंने निर्देश को मैप किया जो खोज इनपुट बॉक्स से जुड़ा होगा।

<input type="text" update-filter placeholder="Enter search term"> 


//and the directive goes like this 
app.directive('updateFilter', [ '$timeout', function($timeout){ 
    var delay; 
    return { 
    link: function(scope, element){ 
     element.on('keypress', function(){ 
      if(!delay) { 
       delay = $timeout(function() { 
        //perform the activity of updating the filter here 
       delay = undefined; 
       },50); 
      } 
     } 
    } 
    } 
}); 

मेरा सवाल यह है कि क्या इस मुद्दे से निपटने के लिए यह सही दृष्टिकोण है या वहां बेहतर समाधान हैं?

Answer 1

आप इसे अधिक जटिल बना रहे हैं। यह कोणीय में बहुत आसान किया जा सकता है।

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }" 
    ng-change="doSearch()"> 

अपने नियंत्रक में क्वेरी तक पहुंचने के लिए $scope.query का उपयोग करें। खोज करने के लिए $scope.doSearch() परिभाषित करें। उपयोगकर्ता द्वारा टाइप किए जाने के बाद 200ms का इंतजार करने के लिए डिबॉन्स विकल्प का उपयोग किया जाता है।

Answer 2

जब मैं फ़िल्टर लिखता हूं, तो फ़िल्टर फ़िल्टर पर पहुंच प्राप्त करने के लिए मैं फिल्टर इनपुट पर एनजी-मॉडल का उपयोग करता हूं, और उसके बाद उस मान का उपयोग सीधे एनजी-दोहराना फ़िल्टर मान में करता हूं।

<input type="text" ng-model="user_filter" /> 

और यहाँ एक दोहराई जाने वाली तालिका पंक्ति, मूल्य द्वारा फ़िल्टर ऊपर मॉडलिंग की है: उदाहरण के लिए, यहाँ इनपुट फ़िल्टर मूल्य प्राप्त करने का जैसे ही आप लिखते ही

<tr ng-repeat="user in users | filter: user_filter"> 

, कोणीय रजिस्टरों नई मूल्य और फ़िल्टर लागू किया जाता है। प्रतीक्षा करने या किसी भी कार्रवाई करने की कोई आवश्यकता नहीं है क्योंकि कोणीय आपके लिए मैप किए गए मान लागू करता है।

Angular docs on filter देखें। यह पृष्ठ के निचले हिस्से में एक कामकाजी उदाहरण है जो इसे क्रिया में दिखाता है।