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'), (query, done) => {
  request
    .get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
    .on('response', (res) => {
      done(null, res.body);
    })
    .on('error', (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:

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

bonanza(document.querySelector('input'), options, (query, done) => {
  request
    .get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
    .on('response', (res) => {
      done(null, res.body);
    })
    .on('error', (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, (query, done) => {
  if (query.search.length > 3) {
    request
      .get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
      .on('response', (res) => {
        done(null, res.body);
      })
      .on('error', (err) => {
        done(err);
      });
  } else {
    done();
  }
});

    

Listen to the events to know what happens inside bonanza

Source:

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

    

Even more! you can set items as disabled if needed

Source:

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

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

    

Get it today from GitHub!