alexurquhart/vue-bootstrap-typeahead

How to clear the typehead after some sort of action

baherfaragval opened this issue · 15 comments

baherfaragval commented

Hello all.
I tried to clear the text inside the typeahead control after selecting from the list and making some action like inserting in another tabular bootstrap , but this doesn't reset the control itself it only affected the associated modeled variable.Please let me know how to handle this

<vue-bootstrap-typeahead 
  v-model="selEmployee"  class="b-form-group typehead"  size="sm" @hit="addToTable();" style="width:100%"
  :data="empEmails"/> </td><td>   <b-button size="sm" variant="success"  @click="addToTable()">

addToTable: function() {
      let that = this;
      that.list.push({that.selEmployee});
      that.selEmployee = "";
            
          
    }
ztomaz commented

this.$refs.employeeAutocomplete.inputValue = ''
You need to include ref="employeeAutocomplete" to your vue-bootstrap-typeahead component

  • 👍6
  • 👎1
chriszrc commented

@ztomaz's solution works, but it's totally not obvious and afaict it's also not documented-

crocodilered commented

+1: that.selEmployee = ""; is the best and logic way to clear control value.

markspare commented

I've created a pull request #38 fixing this issue so you could just do that.selEmployee = "";

  • 👍2
michael-robbins commented

How's PR #38 going? I'd really like this behavior to be standard! :D

  • 👍4
alekpentchev commented

Hi! It's the end of December :) How's it going?

hamza-mashhadi commented

Hi! It's January
I don't think PR has been merged still?
I cannot make it work with the standard as it should.
Still using @ztomaz solution

mattzollinhofer commented

Hey all, I'm looking to revive this project, but I haven't been able to track down the author. So, I've forked it over to here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap.

I'll try to take a look at this PR soon and see if I can get it merged as it seems like there's a number of folks who need this to be fixed.

mattzollinhofer commented

I've begun merging a few fixes into my fork (https://github.com/mattzollinhofer/vue-typeahead-bootstrap) of this project that I'm actively maintaining. I'm not positive if this exact issue is addressed, but if someone can confirm either way I'd appreciate it!

You can find it on npm here: https://www.npmjs.com/package/vue-typeahead-bootstrap.

I hope this helps!

mattzollinhofer commented

@baherfaragval @hamza-mashhadi @alekpentchev @markspare

Unfortunately this repo isn't maintained any longer, but I'm actively maintaining a fork here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap

I believe I've fixed this issue. If any of you have a minute to see if my most recent version resolves the issue and report back on here I'd really appreciate it!

https://www.npmjs.com/package/vue-typeahead-bootstrap

hamza-mashhadi commented

@baherfaragval @hamza-mashhadi @alekpentchev @markspare

Unfortunately this repo isn't maintained any longer, but I'm actively maintaining a fork here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap

I believe I've fixed this issue. If any of you have a minute to see if my most recent version resolves the issue and report back on here I'd really appreciate it!

https://www.npmjs.com/package/vue-typeahead-bootstrap

I tried out your fork and it has solved this Issue.

My Typeahead :
<vue-bootstrap-typeahead :data="titleList" id="job_title" v-model="jobTitleSearch" :serializer="s => s.name" placeholder="Enter Job Title" @hit="selectedJob" ref="jobTitle" />
when I want to reset :
this.jobTitleSearch = "";

p.s I would suggest you update your readme about usage since the package name has changed from the original one. (it's now vue-typeahead-bootstrap instead of vue-bootstrap-typeahead)

Thank you for the fix I will be using your package from now onwards :)

  • 👍2
mattzollinhofer commented

Thanks for checking!

Also thanks for the heads up about the readme, that’s embarrassing 😂

  • 👍1
  • 😄1
mattzollinhofer commented

@hamza-mashhadi Could you close this issue since we've found a solution? I'm trying to work through the old issues on this repository and I don't have control over it to close it.

hamza-mashhadi commented

@hamza-mashhadi Could you close this issue since we've found a solution? I'm trying to work through the old issues on this repository and I don't have control over it to close it.

Sadly I can't, @baherfaragval opened the issue so only he or repo owner can close this.

mattzollinhofer commented

Ugh, sorry,I wasn’t paying close enough attention. Thanks anyway.

  • 👍1