Delayed instant search (includes our coded solution)

You have a suggestion for a future version of phpMyFAQ? Then post it here!

Moderator: Thorsten

Post Reply
ArmgaSys
Posts: 7
Joined: Thu May 21, 2015 4:49 am

Delayed instant search (includes our coded solution)

Post by ArmgaSys »

Hi again!

Our test group strikes again!

The instant search was performing too fast (Yes, it was a first for us to hear the test group say "It performs too fast"). Basically, the instant search box is trigged on the key up event. This resulted in a search being trigged for each key typed by an end user. For longer search terms, this resulted in a very weird experience for our test group.

Our solution was to delay execution of the search until at least 300 milliseconds of no user input had occurred (the user had stopped typing).

Edit .\assets\js\phpmyfaq.js at line 1935 (Version 2.8.22) by replacing the entire autoSuggest function with:

Code: Select all

    /**
     * Auto-suggest function for instant response
     *
     * @return void
     */
	var autoSuggestTimer;
        var autoSuggest = function autoSuggest() {
              $('input#instantfield').keyup(function () {
			if (autoSuggestTimer !== null) {clearInterval(autoSuggestTimer);}
			autoSuggestTimer = setTimeout(function() {
	            var search   = $('#instantfield').val(),
					language = $('#ajaxlanguage').val(),
					category = $('#searchcategory').val();
				if (search.length > 0) {
					$.ajax({
						type:    "POST",
						url:     "ajaxresponse.php",
						data:    "search=" + search + "&ajaxlanguage=" + language + "&searchcategory=" + category,
						success: function (searchresults) {
							$("#instantresponse").empty();
							if (searchresults.length > 0) {
								$("#instantresponse").append(searchresults);
							}
						}
					});
				}
			}, 500);
        });

        $('#instantform').submit(function () {
            return false;
        });
    };

    autoSuggest();
NOTE: If you do not minify the .js file, you will need to edit .\assets\template\default\index.tpl to link in the non-minified version of the phpmyfaq.js (see line 32 of the index.tpl file).

Hope this helps someone else!
Post Reply