{{title}}

'
});
`

Change template for an item group, when using grouped view. Default is

`html


• 
{{title}}

  

`

  Make sure your groupContentName matches the ul class!

  #### wrapClasses:

  `javascript
$(".autocomplete").tinyAutocomplete({
wrapClasses: "autocomplete no-autoinit"
});
`

  To add classes to the list created by tinyAutocomplete, use wrapClasses. The default is "autocomplete". This is useful, for example, where using tinyAutocomplete with Materializecss which adds it's own formatting where it sees an autocomplete. Adding the class no-autoinit will prevent materialize from doing this.

  #### groupContentName:

  `javascript
$(".autocomplete").tinyAutocomplete({ groupContentName: ".my-items" });
`

  If you have changed the groupTemplate, you might have to tell Tiny Autocomplete where to put the group's items. Supply it with a class name and it will append the result items there.

  #### lastItemTemplate:

  `javascript
$(".autocomplete").tinyAutocomplete({
lastItemTemplate:
'

  • Show all results for "{{title}}"
  '
});
`

  Set this template if you want to display a last item without any data bound to it. The field's current value will be supplied as {{title}}. This is useful for giving users an "all results for X" option at the bottom of the list.

  #### templateMethod:

  `javascript
$(".autocomplete").tinyAutocomplete({ templateMethod: _.template });
`

  You can use this to override Tiny Autocomplete's cheap-and-cheerful templating function with something more powerful. The template function takes two arguments. The first argument is the template itself (which is a string) and the second is the object that Tiny Autocomplete passes in to the template to render it. You can use underscore's "template" method as a drop-in replacement and there are probably others that work the same way.

  #### showNoResults:

  `javascript
$(".autocomplete").tinyAutocomplete({ showNoResults: true });
`

  By default Tiny Autocomplete will not show "No results" message when no data is found. Enabling this option will display the "No results found for foo" message.

  #### noResultsTemplate:

  `javascript
$(".autocomplete").tinyAutocomplete({
noResultsTemplate:
'

  • No results for {{title}}
  '
});
`

  Template for the "No results found" message. Will only be shown if showNoResults option is enabled. Uses same templating engine as the other templates.

  #### maxItemsOnMobile

  `javascript
$(".autocomplete").tinyAutocomplete({ maxItemsOnMobile: 5 });
`

  Limit the number of items displayed when the screen width is smaller than the mobileWidth setting (which is by default 700px).
See mobileWidth.

  By default Tiny Autocomplete will set maxItemsOnMobile to 3

  #### mobileWidth

  `javascript
$(".autocomplete").tinyAutocomplete({ mobileWidth: 500 });
`

  See maxItemsOnMobile

  By default Tiny Autocomplete will set mobileWidth to 700

  $3

  If you want to, you can set global options for all your autocompletes by setting them on the \$.tinyAutocomplete.defaults object, like so:

  `javascript
$.tinyAutocomplete.defaults.method = "post";
`

  $3

  Easiest way is to just call

  `javascript
$('.autocomplete').tinyAutocomplete({ settings... });
`

  TinyAutocomplete won't instantiate again, it will just change the settings on the object that's already there. If you want to, you can access the settings object on the element itself - it's in el.tinyAutocomplete.settings.

  Events

  Tiny Autocomplete fires some events for you to hook into. The only ones implemented right now are beforerequest and receivedata. You can use them to maybe show a spinner somewhere else or something like that, but the receivedata event is useful for massaging the data you get back from your server, too. If your json is structured a little differently than expected, perhaps something like this:

  `javascript
{
"thing": true,
"stuff": {
"data": [{
"title": "Foo",
"id": 1
},
{
"title": "Bar",
"id": 2
}]
}
}
`

  ...you could hook into the receivedata event to do this:

  `javascript
$(".field")
.tinyAutocomplete({
url: "http://www.example.com"
})
.on("receivedata", function(ev, tinyAutocomplete, json) {
// tinyAutocomplete.json is the variable that Tiny Autocomplete uses
// for displaying the options later on
tinyAutocomplete.json = json.stuff.data;
});
``

  License

  MIT