Fork me on GitHub

Bonanza

Helps your users find what they need

Easy to get started!

Source:


bonanza(document.querySelector('input'), ['Bart', 'Lisa', 'Maggie']);

    

Use callbacks when you need to bring large data from the server (or wherever)

Source:


bonanza(document.querySelector('input'), function (query, done) {
  request
    .get('/search?term=' + query.search + '&offset=' + query.offset + '&limit=' + query.limit)
    .on('response', function (res) {
      done(null, res.body);
    })
    .on('error', function (err) {
      done(err);
    });
});

    

Since bonanza works with pagination, you can scroll your results down the list and get them on demand!

You can use function templates when working with objects instead of just strings

Sample data:


[{
  "firstName": "Abraham",
  "lastName": "Simpson"
}, {
  "firstName": "Apu",
  "lastName": "Nahasapeemapetilon"
}, {
  "firstName": "Artie",
  "lastName": "Ziff"
}, ... more items ... ]

    

Source:


var options = { templates: { item: (obj) => `${obj.firstName} ${obj.lastName}` } };

bonanza(document.querySelector('input'), options, function (query, done) {
  request
    .get('/search?term=' + query.search + '&offset=' + query.offset + '&limit=' + query.limit)
    .on('response', function (res) {
      done(null, res.body);
    })
    .on('error', function (err) {
      done(err);
    });
});

    

Of course you can use your arrow keys to happily navigate through the results!

Want to do efficient search? Try to run queries only when you think is needed

Source:


bonanza(document.querySelector('input'), options, function (query, done) {
  if (query.search.length > 3) {
    request
      .get('/search?term=' + query.search + '&offset=' + query.offset + '&limit=' + query.limit)
      .on('response', function (res) {
        done(null, res.body);
      })
      .on('error', function (err) {
        done(err);
      });
  } else {
    done();
  }
});

    

Listen to the events to know what happens inside bonanza

Source:


bonanza(document.querySelector('input'), options, function (query, done) {
  request
    .get('/search?term=' + query.search + '&offset=' + query.offset + '&limit=' + query.limit)
    .on('response', function (res) {
      done(null, res.body);
    })
    .on('error', function (err) {
      done(err);
    });
})
.on('change', function (item) {
  alert(JSON.stringify(item));
});

    

Even more! you can set items as disabled if needed

Source:


var options = {
  templates: {
    item: (obj) => `${obj.firstName} ${obj.lastName}`,
    isDisabled: (obj) => obj.isDisabled
  }
};

bonanza(document.querySelector('input'), options, function (query, done) {
  request
    .get('/search?term=' + query.search + '&offset=' + query.offset + '&limit=' + query.limit)
    .on('response', function (res) {
      done(null, res.body);
    })
    .on('error', function (err) {
      done(err);
    });
});

    

Get it today from GitHub!