How to add items to search results?

[jwoertink]

I'm looking to integrate a search in to this, and I saw #9 was fixed which allows me to do this; however, the results don't show until after I clear the search results:

https://codesandbox.io/s/ninja-keys-demo-forked-u9gprl?file=/src/App.vue

In this example, when you open the ninja keys, there's 2 items. Then you search for "test" which will add the third, but you don't see the result. Then if you clear your search, you'll see that the 3rd item was added.

How can I get this to show the result at the time the search is being made?

[jwoertink]

ok, I think this was more a "me" issue. I ended up getting it to work by rethinking how I was setting things up. Sorry for the noise :smile:

[elalemanyo]

@jwoertink I'm looking for a way to add elements dynamically, the idea is to do a request to a search api using change event. But what is the way to then add the new results without modifying the original ones forever? Thanks

[jwoertink]

@elalemanyo I'm using Vue2, but this is how I did it.

data() {
  return {
    searchResults: []
  }
},
computed: {
  hotkeys() {
    const pages = [];
    pages.push({
      // push in the default stuff here
    });
   return pages;
  }
},
mounted() {
  this.setHotKeys();
},
methods: {
  setHotKeys() {
      this.$refs.ninjaKeys.data = [...this.searchResults, ...this.hotkeys];
  },
  searchResultChanged(event) {
    const query = event.detail.search;
    // perform search from query
   this.setHotKeys(); // the magic line
  }
}

It's not a super elegant solution, and I'm noticing a few weird things like if I'm searching on the back-end across multiple data fields, I might get results I want that don't have the title of what was entered in which case no results are displayed. I did see there's a keywords string option, but I didn't get that to work.

What I mean is, for example, if a Post has a title and a content field, and your search queries both, the title might be "Let's make Cheese", and you searched "cheddar". In this case, ninja-keys doesn't return any results because the title doesn't contain the word cheddar. I think that's something you'd have to handle manually.

[elalemanyo]

Thanks @jwoertink for your explanation. Maybe this tool is not intended for adding search results, the solution does not seem very robust. Or what has been your experience?

[jwoertink]

It's fine enough. No, it's not the best solution, but the rest of this package provides so much that I'm ok with it. I don't have time to submit any PRs, but maybe this would be a good one to open up? I guess starting with opening a new issue to discuss adding this as a first-class feature would be good if you wanted to do that, @elalemanyo. Then if @ssleptsov is open to the idea, we can hash out what that interface might look like.