2.1.4 • Published 5 years ago

bonanza v2.1.4

Weekly downloads
170
License
MIT
Repository
github
Last release
5 years ago

Bonanza Build Status Greenkeeper badge

Customizable autocomplete for really large collections

See examples here!

Example page

Install

Use it as an npm package:

npm install bonanza --save

Or just download it from bower

bower install bonanza --save

Angular support

Just use this package instead

Usage

You just need an input to work on and a function (a.k.a. callback) that returns your favorite data

bonanza(element, options?, callback | list)

  • element (required): a HTMLInput Javascript element that will be used for autocompletion
  • options (optional): a set of parameters to customize bonanza as needed
  • callback | list (required): bonanza doesn't know how to get your data, so it needs a function that receives a query, and returns the rows as an Array that will be used to fill the autocomplete info, or even an array with all the results that you need to display.

The example below shows you how to easily set up bonanza for an input element:

bonanza(element, function (query, callback) {
  get('/someApi?query=' + query.search + '&offset=' + query.offset + '&limit=' + query.limit, function (err, data) {
    if (err) {
      callback(err);
      return;
    }
    
    callback(null, data);
  });
});

The options are detailed below:

options.templates

An object with a set of functions. Here you have a detailed table with all that you need to replace:

PropertyDefaultUsage
itemLabel(obj) => objList items
item...customCodeCustom HTML for list item
label(obj) => objInput value when user selects some item
isDisabled(obj) => falseMarks an item as disabled
noResults(search) => \No results for "${search}"``Showed when query returns no results
loadMore...Showed at bottom when there is more data to show
loadingLoading ...Showed at bottom when loading more data

options.css

An object with a set of CSS class names. The detailed list of css classes by default can be found below:

PropertyDefaultPurpose
containerbz-containerThe div class for the main container
hidebz-hideClass to hide the container
listbz-listThe class for the ul inside the container
itembz-list-itemEvery li element for the results
disabledbz-list-item-disabledA disabled element in the list
selectedbz-list-item-selectedWhen an item is being selected
loadingbz-list-loadingThe "loading" li item
loadMorebz-list-load-moreThe "load more" li item
noResultsbz-list-no-resultsThe li item showed when no results for last search
inputLoadingbz-loadingA class for the input element when loading
matchbz-text-matchA class when the search matches the text on an item

options.openOnFocus

A boolean that decides whatever the list will be open on focus event or not. true by default.

options.showLoading

If true it will show a loading text when bonanza does the first search (with the list empty). true by defualt.

options.showLoadMore

If true it will show a "load more" legend text when bonanza has more items to show. true by defualt.

options.limit

The max number of rows expected, 10 by default.

options.scrollDistance

The distance in px before the bottom that will make bonanza start loading more items. 0 by default.

options.hasMoreItems

A function that helps to decide whatever the list being accesed has more items to display or not. By default is this function:

function (result) { return !!result.length && result.length === this.limit; }

options.getItems

This will be used to parse what you send from your callback, to the array that bonanza expects as a result. It contains the following function by default:

function (result) { return result; }

API

The object being returned after initializing bonanza is an EventEmitter instance. bonanza emits a set of events detailed below:

EventDefinition
focusWhen the user made focus on the input element
changeEvery time the user picks an option
selectEvery time the user selects an option, usually navigating the list with the arrow keys
cancelEvery time the user cancels the operation, usually touching the esc key
openWhen something opens the items list
closeWhen the user or an event closes the list
searchWhen starting to do a search
successWhen the search returns data
errorEvery time an error sadly occurs

Contributing

The dist folder as well as the version in the package.json file should not be modified. Create a PR with your changes and if needed a test asserting them. Once merged a new version will be uploaded to bower and npm with the dist folder updated.

License

MIT

2.1.4

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.3.0

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.3

5 years ago

1.1.2

7 years ago

1.1.0

7 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.8.3

8 years ago

0.8.2

8 years ago

0.8.1

8 years ago

0.8.0

8 years ago

0.7.2

8 years ago

0.7.1

8 years ago

0.7.0

8 years ago

0.6.7

8 years ago

0.6.6

8 years ago

0.6.5

8 years ago

0.6.3

8 years ago

0.6.2

8 years ago

0.6.1

8 years ago

0.5.7

9 years ago

0.5.6

9 years ago

0.5.5

9 years ago

0.5.4

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.1

9 years ago

0.5.0

9 years ago

0.4.0

9 years ago

0.3.3

9 years ago

0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.0

9 years ago

0.1.0

9 years ago