search

darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

Matched characters are not getting bold. #110

Closed mobinsheraz closed 5 years ago

mobinsheraz commented 5 years ago

When I search for a word. It shows the suggestions under the search-box but doesn't highlight (bold) the matched characters.

E.g. If I search character o from the word Frodo, it should highlight or bold Frodo.

Please guide if there is any solution to bold match characters.

Many thanks

darrenjennings commented 5 years ago

version: v2.0.0-beta.8

Sure this can be accomplished using the v-html on the text of your slot:

https://codesandbox.io/s/ol7yp20966

<vue-autosuggest
  v-model="query"
  ...
>
  <template slot-scope="{ suggestion }">
    <span v-html="bolden(query, suggestion.item.title)">
  </template>
</vue-autosuggest>
bolden(text, suggestion) {
  if (!text) {
    return suggestion;
  }
  var regex = new RegExp("(" + text + ")", "gi");
  suggestion = suggestion.replace(regex, "<b>$1</b>");
  return suggestion;
},

If you're using v1.x then you'd have to access the current input value differently since it doesn't support v-model (e.g. using $ref.autosuggest.searchInput)

mobinsheraz commented 5 years ago

Thanks @darrenjennings, you've added the awesome feature in v2.0.0-beta.8.

I had v1.8.3 installed. Uninstalled the previous version and installed v2.0.0-beta.8 and followed the example https://codesandbox.io/s/ol7yp20966

It throws [Vue warn]: Error in render: "TypeError: i is undefined"

Also, the basic example from here https://github.com/darrenjennings/vue-autosuggest#usage is now throwing the same error in v2.0.0-beta.8. This basic example was working fine in v1.8.3

Any idea regarding this issue!

darrenjennings commented 5 years ago

It's possible that you are running into #109. I loaded the latest beta into codesandbox with the base and it works as expected. https://codesandbox.io/s/vueautosuggest-20beta-simple-b616y