javascript - Prevent ajax call on empty spaces typeahead.js - Stack Overflow

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>'
      },

});

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>'
      },

});

• javascript
• jquery
• ajax
• twitter-bootstrap
• typeahead.js

Share Improve this question Follow edited Dec 27, 2017 at 7:22 Keerthi 52588 silver badges1414 bronze badges asked Dec 21, 2016 at 11:08 Mairaj AhmadMairaj Ahmad 14.6k22 gold badges2828 silver badges4343 bronze badges 4

• why is it a problem to send the call when there are spaces? Presumably the user will just get no results. – ADyson Commented Dec 21, 2016 at 13:46
• I want to avoid network trip. – Mairaj Ahmad Commented Dec 21, 2016 at 14:29
• 3 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 – ADyson Commented Dec 21, 2016 at 14:38
• 1 Look this example – jd_7 Commented Dec 20, 2017 at 15:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +25

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.

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.

Why not try this?

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