Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to dynamically update options on type #28

Open
caseymct opened this issue Jun 13, 2016 · 1 comment
Open

How to dynamically update options on type #28

caseymct opened this issue Jun 13, 2016 · 1 comment

Comments

@caseymct
Copy link
Contributor

This is more of a question, and probably more related to selectize itself.

We are using ui-selectize to allow a user to add hashtags to a post. When the widget is initialized, I make a request to the server that populates the dropdown with trending hashtags. In Ember, I do this on

didInitAttrs() {
   this.fetchOptions();
}

where options is then passed in to tags-input:

{{tags-input
  options=options
  values=selectedTags
  placeholder=placeholder
  closeAfterSelect=true
  onChange=(action 'onChange')
  onLoad=(action 'onLoad')
  onType=(action 'onType')
  create=true
}}

in the onType action handler, as the user types, I want to issue an API request to the server that returns matching hashtags to their search, and dynamically update options; e.g.

actions: {
   onType(data) {
      let query = hashtags.asTag(data.value);

      if (!isEmpty(query)) {
         Ember.run.debounce(this, this.searchTags, query, this.DEBOUNCE_WAIT);
      }
      else if (!this.get('optionsEqualTrending')) {
        // If the user deletes their search, re-set options back to the initial list of trending tags
        this.setOptionsToTrending();
      }
  }

Where searchTags issues the api request and updates the options.
However, no matter what I do I can't seem to get the options to update. Ideally I'd like the dropdown to change while open to the matched tags. I've tried setting options directly, getting the selectize instance from the class (data.context.get('selectize');) and doing the following:

selectize.clearCache('option');
selectize.clearOptions();
selectize.addOption(options);
selectize.refreshOptions(true);

and nothing seems to update it. any help would be very appreciated.

@yankeeinlondon
Copy link
Member

appologies but am out of country and have limited access at the moment. from your example though i suspect you may find a similar example on the underlying Selectize site. Have you looked there?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants