Added delay for search area
authorAlexander Ebert <ebert@woltlab.com>
Thu, 27 Feb 2014 22:19:49 +0000 (23:19 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Thu, 27 Feb 2014 22:19:49 +0000 (23:19 +0100)
Previously a request would be send for every key stroke, now a request will only be send, if there was no key stroke for 500 miliseconds. This means that if you type pretty fast, it will only trigger a search once you stop.

This should reduce "hammering" the server with request which are more or less void since they will be ignored.

wcfsetup/install/files/js/WCF.Search.Message.js
wcfsetup/install/files/js/WCF.js

index 3ab63e4a32c154bb1fd520bf9b023daf6e4fecd8..99dc4908493577be64ffba6979677292e30e80b5 100644 (file)
@@ -94,15 +94,27 @@ WCF.Search.Message.KeywordList = WCF.Search.Base.extend({
 });
 
 /**
+ * Handles the search area box.
  * 
+ * @param      jQuery          searchArea
  */
 WCF.Search.Message.SearchArea = Class.extend({
+       /**
+        * search area object
+        * @var jQuery
+        */
        _searchArea: null,
        
+       /**
+        * Initializes the WCF.Search.Message.SearchArea class.
+        * 
+        * @param       jQuery          searchArea
+        */
        init: function(searchArea) {
                this._searchArea = searchArea;
                
-               new WCF.Search.Message.KeywordList(this._searchArea.find('input[type=search]'), $.proxy(this._callback, this));
+               var $keywordList = new WCF.Search.Message.KeywordList(this._searchArea.find('input[type=search]'), $.proxy(this._callback, this));
+               $keywordList.setDelay(500);
                
                // forward clicks on the search icon to input field
                var self = this;
@@ -117,7 +129,9 @@ WCF.Search.Message.SearchArea = Class.extend({
                
                if (this._searchArea.hasClass('dropdown')) {
                        var $containerID = this._searchArea.wcfIdentify();
-                       var $form = this._searchArea.find('form').submit(function() {
+                       var $form = this._searchArea.find('form');
+                       $form.submit(function() {
+                               // copy checkboxes and hidden fields into form
                                var $dropdownMenu = WCF.Dropdown.getDropdownMenu($containerID);
                                
                                $dropdownMenu.find('input[type=hidden]').appendTo($form);
@@ -130,6 +144,12 @@ WCF.Search.Message.SearchArea = Class.extend({
                }
        },
        
+       /**
+        * Callback for WCF.Search.Message.KeywordList.
+        * 
+        * @param       object          data
+        * @return      boolean
+        */
        _callback: function(data) {
                this._searchArea.find('input[type=search]').val(data.label);
                this._searchArea.find('input[type=search]').focus();
index 1c3e870126374ae070936c88b1d171f85f0e82c2..edb5653308935b189b64c7783b0ad7803fc976d4 100755 (executable)
@@ -5542,6 +5542,12 @@ WCF.Search.Base = Class.extend({
         */
        _commaSeperated: false,
        
+       /**
+        * delay in miliseconds before a request is send to the server
+        * @var integer
+        */
+       _delay: 0,
+       
        /**
         * list with values that are excluded from seaching
         * @var array
@@ -5590,6 +5596,12 @@ WCF.Search.Base = Class.extend({
         */
        _triggerLength: 3,
        
+       /**
+        * delay timer
+        * @var WCF.PeriodicalExecuter
+        */
+       _timer: null,
+       
        /**
         * Initializes a new search.
         * 
@@ -5606,6 +5618,7 @@ WCF.Search.Base = Class.extend({
                }
                
                this._callback = (callback) ? callback : null;
+               this._delay = 0;
                this._excludedSearchValues = [];
                if (excludedSearchValues) {
                        this._excludedSearchValues = excludedSearchValues;
@@ -5714,14 +5727,22 @@ WCF.Search.Base = Class.extend({
                                }
                        };
                        
-                       this._searchInput.parents('.searchBar').addClass('loading');
-                       this._proxy.setOption('data', {
-                               actionName: 'getSearchResultList',
-                               className: this._className,
-                               interfaceName: 'wcf\\data\\ISearchAction',
-                               parameters: this._getParameters($parameters)
-                       });
-                       this._proxy.sendRequest();
+                       if (this._delay) {
+                               if (this._timer !== null) {
+                                       this._timer.stop();
+                               }
+                               
+                               var self = this;
+                               this._timer = new WCF.PeriodicalExecuter(function() {
+                                       self._queryServer($parameters);
+                                       
+                                       self._timer.stop();
+                                       self._timer = null;
+                               }, this._delay);
+                       }
+                       else {
+                               this._queryServer($parameters);
+                       }
                }
                else {
                        // input below trigger length
@@ -5729,6 +5750,31 @@ WCF.Search.Base = Class.extend({
                }
        },
        
+       /**
+        * Queries the server.
+        * 
+        * @param       object          parameters
+        */
+       _queryServer: function(parameters) {
+               this._searchInput.parents('.searchBar').addClass('loading');
+               this._proxy.setOption('data', {
+                       actionName: 'getSearchResultList',
+                       className: this._className,
+                       interfaceName: 'wcf\\data\\ISearchAction',
+                       parameters: this._getParameters(parameters)
+               });
+               this._proxy.sendRequest();
+       },
+       
+       /**
+        * Sets query delay in miliseconds.
+        * 
+        * @param       integer         delay
+        */
+       setDelay: function(delay) {
+               this._delay = delay;
+       },
+       
        /**
         * Selects the next item in list.
         */