kyleneedham / autocomplete Goto Github PK

hi! thank you for this project!

I just open an issue as I had troubles at first using it as the dependency to Bootstrap is only specified in a52bb74 commit message, probably explaining the errors I get with

@ui.autocomplete.dropdown 'toggle'

and the events

'shown.bs.dropdown': 'setDropdownShown'
'hidden.bs.dropdown': 'setDropdownHidden'

which I guess aren't fired.

I don't know if you are still maintaining this project, but I thought it might a useful information for other people arriving here

Hello!

Good piece of software. Congratulations!

I need to set a behavior dynamically inside a view, much like this:

javascript
return Marionette.LayoutView.extend({
initialize: function(options){
this.autoCompleteData = options.autoCompleteData || [];
// this.behaviors.AutoComplete.collection.data = options.autoCompleteData;
// this.behaviors.AutoComplete.behaviorClass.setDataset(options.autoCompleteData);
},
template: SimpleSearchTemplate,
events: {
"click #search-button": "search"
},
ui: {
autocomplete: "#search-box"
},
behaviors: {
AutoComplete: {
behaviorClass: AutoComplete.Behavior,
collection: {
options: {
type: 'dataset',
data: this.autoCompleteData
}
}
}
},
search: function(){

        var value = $("#search-box").val();

        if (value !== null && value !== undefined) {
            vent.trigger("search:poi:byNameAddressBuilding", value);
        }
        else {
            this.clear();
        }
    }
});

I know this will not work, so I've been trying to get using the `setDataset`function. How can I do that? I've been looking for it, without success.

I'm trying to use a handlebars template as I would on a normal view but it doesn't seem to do anything I just get the default result list.

Views.Form = Marionette.ItemView.extend({
        template: formTpl,
        className: "wrapper",
        ui: {
          autocomplete: '#product'
        },
        behaviors: {
          AutoComplete: {
            behaviorClass: AutoComplete.Behavior,
            collection: {
              options: {
                type: 'remote',
                remote: '/api/product/search',
                valueKey: 'sku',
                keys: {
                  query: 'q',
                  limit: 'page_limit'
                },
                values: {
                  limit: 3
                }
              }
            },
            childView: {
              definition: AutoComplete.ChildView.extend({
                template: searchTpl
              })
            }
          }
        }
      });

When first fetching results using a remote, the empty view is shown before any results are returned.

Clicking inside the auto-complete input twice will toggle the drop-down to a hidden state.