alexurquhart / vue-bootstrap-typeahead Goto Github PK

Greetings,

Project works great! I am not very experience with JS, but what I was trying to do with this code was to use it to select an item within an array of objects, whereas the searched properties might be distinct than property bound to vmodel. As it stands, is my assumption correct that this is only for simple arrays of strings?

Is there a way to make the results appear above the searchfield? I fiddled around and manage to set margin-top: -120px; to the class .vbt-autcomplete-list[data-v-9a21a6f4].

But how do I bind it? I have multiple searchfields on the same page and I would like this to only be set on one autocomplete-list.

Value of attribute q not load if alter in created() or mounted(), as in my example:

HTML:

<vue-bootstrap-typeahead
   v-model="q"
   :data="list"
   :serializer="i => i.name"
   placeholder="Choose your bank"
   @hit="selectedItem($event)"
   class="vue-autocomplete">
</vue-bootstrap-typeahead>

JAVASCRIPT:

data() {
   return {
      q: "",
      list: []
   }
},
mounted() {
   this.q = loadValueDatabase();
}

The value of attribute q is altered, but not renderized in v-model

If you use this on plugin on IE 11 and you have error de syntax caused by =>
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .webpackConfig({ module: { rules: [ { test: /\.js?$/, include: /node_modules(?!\/vue-bootstrap-typeahead)/, use: [ { loader: 'babel-loader', options: Config.babel() } ] } ] } });

Use this solution.

Hi!

I have question - it is possible to show suggestions list after user click in input ?
I mean something like google, show list only click in input

thanks for answer!

It would be nice if this supported "state" so validation could be added to the field

Would it be possible to check the input-field after leaving the focus (like blur)

Hello,

Several errors are showing up when the v-model of the component is equal to null. For now I can avoid this value but I thought you should be aware of.

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null" found in <VueBootstrapTypeaheadList> at vue-bootstrap-typeahead/src/components/VueBootstrapTypeaheadList.vue
TypeError: Cannot read property 'length' of null at VueComponent.matchedItems
[Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'." found in <VueBootstrapTypehead> at vue-bootstrap-typeahead/src/components/VueBootstrapTypeahead.vue
TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element' at VueComponent.mounted
Uncaught TypeError: Cannot set property 'width' of undefined at VueComponent.resizeList

Hi

Can i set some CSS to get the searchlist wider that the actual search field ?

Best Carsten

Currently, the results array is filtered based on the data passed by the serializer function, or in the suggestion slot.

In my user case, I retrieve from the server results that are still relevant, although in the drop-down I don't show why they are relevant.

For example, for query = 'her' I may return from the API:

[
  {
    "code": "XYZ",
    "name":"triplet",
    "location":"here"
  }
]

But my serializer function only returns triplet - XYZ.

The matchedItems() function will not show this result because it doesn't pass the RegEx.

It would be useful to have a way of bypassing the regular expression and just show all results from data.

Sorry to dig up this thread again. I am also facing a similar issue

    ERROR in ./node_modules/vue-bootstrap-typeahead/src/components/VueBootstrapTypeahead.vue 1:0
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type.
    > <template>
    |   <div>
    |     <div :class="sizeClasses">
     @ ./ClientApp/views/home.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./ClientApp/views/home.vue?vue&type=script&lang=js&) 2:0-97 35:27-48
     @ ./ClientApp/views/home.vue?vue&type=script&lang=js&
     @ ./ClientApp/views/home.vue
     @ ./ClientApp/router/routes.js
     @ ./ClientApp/router/index.js
     @ ./ClientApp/boot-app.js

I tried to provide full import path like @HasnatH 's but it still fails.
I am running
"vue": "2.5.16",
"vue-loader": "15.4.2",
"webpack": "^4.28.2",
"webpack-cli": "3.1.2",
"bootstrap-vue": "^2.0.0-rc.11",
"vue-bootstrap-typeahead": "^0.2.6",
"@babel/core": "7.2.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "7.2.0",
"@babel/preset-env": "7.2.3",
"@babel/runtime": "7.2.0",

similar to #12

Could you, please, help me to resolve the next situation? I've found out that this typeahead wants data array to be filled with information. In my case, my application cannot guarantee the presents of data in the array. So, could you, please, find out the way to improve the typeahead to make it possible not to throw an error if there is no data in the array.

<typeahead :data="dataArray" />  


data: () => ({  
    dataArray: []  
})  

Hope, this will make sense for you.

Is it currently possible to show all on initial focus event? I have tried setting minMatchingChars=0 which will show all after a key is pressed.

I have added vue-bootstrap-typeahead to my project as follows:

npm i vue-bootstrap-typeahead --save

I have other components I am importing such as vue-bootstrap-datetimepicker like this:

import DatePicker from 'vue-bootstrap-datetimepicker'

However, when I try to import the vue-bootstrap-typeahead like this:

import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'

I get the following error:

SyntaxError: Unexpected token <

I have also tried to use require but face the same error:

var VueBootstrapTypeahead = require('vue-bootstrap-typeahead')

I haven't even added it to my components or to my template

Please advise why I might be having this issue.

Thanks.

Not working with typescript, I'm getting error Error: Cannot find module 'vue-bootstrap-typeahead'. It's asking for dev dependency '@types/vue-bootstrap-typeahead'.

Hello,

First of all, thank you for this component! It would be nice if we could see the complete list (or the maxMatches if != 0) when the input gets the focus and minMatchingChars = 0.

Thanks for your feedback!

Hello,
How do i send the data selected by the user through a form?
I cant find a way.
I'm a newbie on vuejs and web development.

Would be good to navigate through option with arrow keys. Currently to choose item, use has to use mouse...

Is it possible to do that? Any workarounds?

There is already an input event, triggered on input on the <input> (:thinking:...).

It might be useful to have other events :

• submit: currently when a user hits enter, nothing happens. I think a significant proportion of the users type a city and hit enter instead of using their mouse. Currently we can't handle it.
• focus/blur: they are already used in the internal mechanism of the component to toggle the list display. In my case, I would like to use them to empty the input content on focus, and set back the previous selection on blur.

There might be other events interesting to customize, but these are the one for which I have a use case.

I don't know if it's possible to have a generic code that will "pass up" all events from the input to the parent component.

Also, since the component includes an input and a list, it's probably smarter to name these events input-* (input-submit, input-focus, input-blur).

Hello, and thanks for this awesome plugin!

In French language (and many other languages), we use accents, diacriticals etc...
So the user input need to be normalized to match words with or without special chars.
For example, États-unis should match with "états" and "etats", but it's currently not.

https://codepen.io/maximelebreton/pen/dLOOmO

Maybe the normalize() method is the solution: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/normalize

Thanks for your help!

Might be stupid, but I really can't figure out how to set the initial selected value.
Can I get some help?

Currently I use a watcher method which does some complicated search and provides array of results in a beautiful order (based on my custom priority). But when results are displayed in the popup - they are ordered in some internal order, which is weird.
It would be great to be able to just provide array of objects with my ordering and be able to see them in the same order in popup.

disabled doesn't work

I am using version 0.26 and using the component as such:

<vue-bootstrap-typeahead
v-model="sampleOrderSKU1"
:data="skuAutoCompleteData"
:maxMatches="25"
placeholder="SKU number"

However, only 10 results are being displayed.

I find this Matt Zollinhofer's fork continued development.

(btw, I find it unprofessional to leave repo without any notice of unsupported/archive or "deprecation in favor of another fork" mode).

Thanks for this easy to use and implement plugin.

When implementing the plugin with an API, it fires the debounce method after an item on the autocomplete list is selected. I think this call is not necessary since the user already finds the item in the list. This can further reduce the call to the API at least by 1, which can be helpful for a very busy page.

how to add aotufocus to component vue-bootstrap-typeahead when the component in mounted or after refresh the page. Thanks

I see lots of pull requests and issues like keyboard navigation, setting initial value etc. Will there be any progress on integrating these contributions?

Component has issues in IE 10/11.

The current build does not allow all input properties to be used.
For example maxlength="2" does not restrict the input text box.

Below is my example code:

<typeahead
     v-model='query'
     :data='DemoData'
     :serializer='item => item.ActivityCode'
     :minMatchingChars='settings.min'
     placeholder='Activity Code'
     class='typeahead'
     maxlength='4'
>

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 = "";
            
          
    }

On Safari, selecting item from the list doesn’t do anything! Any solution?

This one is tricky...

Currently the results from the backend are filtered using a regexp based on the query. It would be nice to be able to make it fuzzy. Here are a few examples from Google Autocomplete :

The - is matched with the space char

The c is matched with a k

Not sure if this should be included in the default component, or be allowed as an extra (this will probably require a dependency to a js fuzzy search library).

This issue has low priority 😄

Hi,
I have a problem with hover color in autocomplete list, it's blue with the same font color, it's look ugly.

How I change this style ?

.vbt-autcomplete-list { color: red !important; padding-top: 5px; position: absolute; max-height: 350px; overflow-y: auto; z-index: 999; }
`.vbt-autcomplete-list:hover {

    color: red !important;
}`

.list-group-item-action{ color: red !important; }

I try implement that style, but still doesn't work fine.

when the backend call coming with fields that has null and this fields are mapped in the v-model it always throw this error

Cannot read property 'normalize' of null

what is the solution here ?

thanks

Allow user to navigate typeahead entries with keyboard

• Has extra brace (typo)
• No default set, which results in "undefined" added to the list of classes for the input

hi!

I have problem with suggest list, which is hidden, after when i want swipe suggest list, it's only available in tabs likein code
<b-tabs> <b-tab title="Autosuggest"> <vue-bootstrap-typeahead v-model="query" :data="['Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada','Canada', 'USA', 'Mexico']" /> </b-tab> </b-tabs>

There should be a way to give the user some feedback when there is no match from the API.

Currently we only see the shadow of the result list.

I was using vue-strap with typeahead. We have the following code:

<typeahead v-model="searchQuery[field]"
    :async="getTypeaheadURL(field)"
    :placeholder="placeholder(field)"
/>
...
getTypeaheadURL: function(param) {
    return '/' + this.collection + '/params/' + param + '?' + param + '=';
},

I can't seem to understand how do I convert this piece of code to use vue-boostrap-typeahead. What should be data?

Even if I sort the data source, the suggestions are not displayed in alphabetical order.

Example Array
['Another Organization', 'Cool Organization']

Typing "Org" will display Cool Organization first. Is there any way to force the suggestions to display in alphabetical order? In this scenario, you would want to view the list alphabetically rather than relying on a higher fuzzy search score.

  <vue-bootstrap-typeahead    
        ref="usersAutocomplete"     
        v-model="username"
        :data="users"
        :serializer="item => item.login"
        @hit="$event=>addUser($event)"
      />

and this.username='' still not working, but this.$refs.usersAutocomplete.inputValue = '' is working. But this is not best solution

When we hover a suggestion, the class active is added to the list item.

However, the class active renders very aggressively (bg-primary) and should be applied only once the option is selected. Hovering should only make a light emphasis the suggestion.

The current other classes of the suggestions do the job: with .list-group-item-action, there is already a light hover effect, which is less aggressive and a better hover feedback. (see https://getbootstrap.com/docs/4.1/components/list-group/#contextual-classes, 2nd example (there is no direct anchor for this example...))

Let me know what you think about this.

Also, the background-variant property is not a good idea. For example, if you try to use bg-light, when hovering, the text will still be white because of the active class, but with the light background. If you remove the active class, the text will have the color set by the bg class and it will work.

Also, bootstrap was thought to use list-group-item-* classes to set colors on list items (example list-group-item-primary) and not bg-*. But these colors are lighter and I understand that you may want the real primary blue on hover.

To make everyone happy we could replace the bg-${backgroundVariant} class by a custom class + a custom hover class. This way you could have the default + bg-primary on hover, or use list-group-item-* classes.

If you agree on this, I can work on a PR when I have time.

Thanks

when write any word in input appear me this issue on console
ReferenceError: Can't find variable: regeneratorRuntime

First of all, thanks for this plugin. I tried pretty much every other "vue-autocomplete" plugin and didn't find any as clean and customizable as this one. 👍

I'm trying to replace "seamlessly" google maps autocomplete with this plugin, therefore I need to achieve this UI:

As you can see the template is something like:

<font-awesome-icon icon="map-marker-alt" /> {{ suggestion.name }} <small>{{ suggestion.countryName }}</small>

However formatting is only customisable by the serializer property which requires a function.

It would be nice to be able to use a scoped slot (see vue scoped slots).

I will try to submit a PR when I have time.

I have used v-model directive and I can see value is set into my store which I am populating again on mounted callback but that value is not populating in the typeahead text box.

Hi, I got strange errors, though select is working:

<vue-bootstrap-typeahead
          v-model="filter.value"
          :data="filter.settings.options"
          :serializer="s => s.name"
        />

In the console I got errors. It occurs each time I input a new characters in the field.

The suggestions are hidden when they are inside a scrollable card with overflow: hidden

Hi, would it be possible to attach the list to the body so when the list is displayed won't be under other components?

It seems to be a bootstrap problem relative to the z-index, I've to do it with other components created by myself, the component vue2-datepicker has it and save me a lot of time fix in it.

Thanks in advance.