Prevent ajax call on empty spaces typeahead.js

Question

I have been working with typeahead.js and loading data using BloodHound remote option.

Everthing is working as expected except that when i enter only spaces in textbox typeahead still sends ajax call.

I want to know if there is way to prevent ajax call if there are only spaces in textbox. I am looking for similar behavior like trim.

Here is my code. I have tried to use prepare function but with no luck.

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ProductID', 'ProductName'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
              url: urlVar + "LoadAllProductByProductName/%QUERY",
              wildcard: '%QUERY',

            },
    sufficient: 3,
   });

const $tagsInput = $('.txtProductName')
$tagsInput.typeahead({
   minLength: 3,
   source: dataSource,
   hint: false,
   highlight: true,
   isBlankString: false
   },
   {
      limit: 10,
      source: dataSource,
      name: 'dataSource',
      display: function (item) {
         return item.ProductName
      },
      suggestion: function (data) {
         return '<div>' + data.ProductName + '–' + data.ProductID + '</div>'
      },

});

Prefecture

why is it a problem to send the call when there are spaces? Presumably the user will just get no results. – Experienced

I want to avoid network trip. – Prefecture

give that a network trip is generated every single time the user types anything where there are more than 3 characters, and the chances of a user actually typing 3 empty spaces (they aren't likely to think it will return anything!), you might go to a lot of effort and reduce your network traffic by 0.0001%. Just saying it seems a bit pointless. But if you really want to, you could create a custom function for the source attribute and prevent the request from going ahead at that point based on the search terms (and just return an empty array). The typeahead docs show the method signature – Experienced

Look this example – Trypanosome

Answer 1

I would try attaching a keyUp event to the text box to perform the filtration:

$tagsInput.keyup(function(){
        this.value = this.value.replace(/  */, ' ');
    });

That will fire after the second space, which should mitigate the undesired behavior unless there are non-space characters in the field, as well.

Doting

i think this is the possible way – Plurality

Even if it works, it's not the sort of solution I'm looking for. If you're sure there is no idiomatic way to do it, I prefer that as an answer. – Numismatist

Answer 2

The remote property has a prepare function which you can use the handle this change prior to the call going over the wire.

As an example:

function createBloodHoundConfig(options) {
    return {
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        identify: options.identify,
        sufficient: 8,
        remote: {
            url: options.url,
            prepare: function (query, settings) {
                settings.url = settings.url.replace("{q}", query.trim());
                return settings;
            }
        },
    };
}

Note that in this case you do not supply the wildcard property, as it is effectively a shorthand for doing token replacement.

Lumper

This doesn't prevent the call. It simply trims what is searched for. – Numismatist

Answer 3

Why not try this?

prepare: function (query, settings) {
                    var word = $.trim(query);
                    if(word){
                        settings.url = "/search?q=" + 
                       word;
                        return settings;
                    }
                },

Desalinate