frikinside / vue3-simple-typeahead Goto Github PK

Hi!

It would be great if we can get the ability to trim() the searched text from whitespaces.
Or Is it possible now? If yes, how?

When I delete the input and press enter to make it search with the empty input, it does no action. Is there any way to make the event with empty input?

For example to show product and its price.
Problem: :itemProjection="(item) => {return item.name + ' ' + item.price }" <- can't use custom CSS on price.

Possible solution?

<span v-html="slot.boldMatchText(slot.itemProjection(slot.item.name))"></span>
<span class="text-gray-500 ml-4" v-html="slot.boldMatchText(slot.itemProjection(slot.item.price))"></span>

Hello,

how can I direct the focus to the list on page loading, to make it ready to take the keyboard's input?

for example, the function below is for a "clear input" button that works (does clear the field), but I can't make it so I don't have to go click on the input field again to be able to write.

resetInput() {
  this.$refs["inputarea"].input = "";
  this.data.selection = null;
  this.$refs["inputarea"].$el.focus(); // this line doesn't do much, also tried $refs[].input.focus() and $refs[].focus() 
},

many thanks in advance :)

If items contain others fields that him not display with the projection method it is not possible to see this items. An option for disable filteredItems() function will be welcome.

Example :

const items : [
    { firstName: 'Mathieu', lastName: 'Dumoutier', email: '[email protected]' }
];

:itemProjection="function(item) {
    return item.firstName + ' ' + item.lastName;
}"

I would like see my item when I type "[email protected]".

It would be nice to have the ability to add a button above the list.

Example:

Adding autocomplete="off" on input should solve the problem.

Hey, thanks for all your work on this component! App I am developing heavily relies on such functionality, so I really right want to get it right.

I have noticed behaviour difference depending on whether :item-projection is set or not. This behaviour can be observed on your demo as well.

• with :item-projection (Demo 2) - after selecting an item dropdown remains under input widget:

• this isn't the case for Demo 1 & 3 which nicely clean up after selecting an item.

This seems unnecessary to me and I am wondering whether it is intended behaviour or a bug.

Also, when focus returns to input widget the same single element list gets displayed. Would it be possible to only display that list (when item was already selected and focus returned) only for lists longer than single element? Hope that makes sense.

My situation is that when the user types in more than 4 characters in the input field, the text needs to be sent to a server by axios, and the resulting list/array has to be shown as the selection list. Currently I'm doing a very roundabout way without any library.

Can we add an option so we can disable the auto-complete?

It works properly on browsers but we have integrated it in an app which gets loaded into a web view in Android phone. And we saw this strange behaviour that in our mobile app in web view it only shows suggestions when a complete word is matched.

The component is not working on vue 3 (composition api)

I need this in a component not globally

In my custom component I imported like in the example:

import SimpleTypeahead from 'vue3-simple-typeahead''
export default {
  name: 'my-vue-component',
  ...
  components: {
    SimpleTypeahead
  }
  ...
}

but it does not appear and I get a warning:

Failed to resolve component: vue3-simple-typeahead
If this is a native custom element, make sure to exclude it from component resolution via compiler.isCustomElement .......

Any idea?

*** UPDATE ****

1. If using as global is working..... but I don't want as global.
2. is there a way to bind some classes directly to the input ? ex: form-control form-control-lg .... Or I have to customize it individually to look like the bootstrap inputs....

Hi!

Is it possible somehow to put an icon inside the search input element?
Just like Google's input

If it not possible it would be a great feature to develop the ability to put icons inside input (left or right, or both).

I have few problems using this plugin:

1. Hard to recreate edit page for my form.
2. Can't delete item in array list.

This is quite a strange bug, so I'm going to try to provide as much info as possible.

There seems to be an issue with some Android devices displaying any typeahead content until the soft keyboard minimised.

In the above video, the white part taking up half the screen is the Android native soft keyboard, notice that its only when this keyboard is minimised does any typeahead content appear.

Other typeaheads like https://uiv.wxsm.space/components/typeahead.html seem to work fine (they show typeahead content before soft keyboard is minimised) with the same setup.

I tested with your test website here https://vue3-simple-typeahead-demo.netlify.app , I tested with a Nexus 5, Android 8.1.0, tested with latest versions of Chrome, Brave and Firefox and all produce the same result. So I'm wondering if this has to do with the keyboard implementation or focus implementation. I've also see the issue on a Samsung S10 using Brave.

Haven't found a way to reproduce this issue in any other way than testing on a real phone

I simply want to try out this component (vue3-simple-typeahead), because it is really needed and looked awesome.
Thumbs up so far.

Now, my code without the vue3-simpe-typeahead works fine.
Followed the Installation guide via npm, then imported globally in my main.js with import SimpleTypeahead from 'vue3-simple-typeahead';

Now, in a Testcomponent (which works fine without this compoennt, shows text and stuff) I implement this component like so:

<vue3-simple-typeahead :items="['One','Two','Three']" id="orhfwoehfroehfrei" placeholder="Start writing..." @selectItem="selectItemEventHandler" @onInput="onInputEventHandler" > </vue3-simple-typeahead>

In my setup():
`
....
function selectItemEventHandler(item) {
console.log("selectItemEventHandler", item);
}

function onInputEventHandler(item) {
  console.log("onInputEventHandler", item);
}

....

return {
onInputEventHandler,
selectItemEventHandler
}
`

My browser throws 2 Warnings:
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <Vue3SimpleTypeahead items=
Array(3) [ "One", "Two", "Three" ]
id="sifhwaouhfowaf" placeholder="Start writing..." ... >
at
at <CreateBlog class="" onVnodeUnmounted=fn ref=Ref< undefined > >
at
at

[Vue warn]: Unhandled error during execution of render function
at <Vue3SimpleTypeahead items=
Array(3) [ "One", "Two", "Three" ]
id="sifhwaouhfowaf" placeholder="Start writing..." ... >
at
at <CreateBlog class="" onVnodeUnmounted=fn ref=Ref< undefined > >
at
at

And ONE ERROR:
Uncaught (in promise) TypeError: Object(...) is not a function.

The Page doesn't load and I don't know where to start debugging.

Where is the error?

It would be nice to be able to set a default value for the input.
Could be a position in the items array, or something else.

When entering text, the first item in the list is automatically selected. Is it possible to change the behavior so that no item is selected until the user navigates the list using arrow keys?

I am a new user and trying to clear the input value after selecting result. I am trying these codes

`

    <button type="button" class="btn btn-success ml-2 width-xs"  @click="add"><i class="las la-check-double"></i></button>
</div>

Can anyone help me to understand the usease of the methods, please?

I would like to have a selection list for existing values, but also allow entry of entirely new value on blur via tab or enter.

Is this possible?
It seems that if I type anything that is a prefix of existing value, then on blur I get first selection rather than what I typed.

We need the ability to delete the text from the input with just one click. A little optional delete icon would be great on the right side of the input. This is especially useful when using this library on a mobile device.
Here is an example from Google search input:

I think we need an optional prop for this.
@frikinside If you make me a contributor I will try to do this and open a Pull request.

When using the component, if selectOnTab is True, I am unable to tab out of the component during keyboard navigation. Is this intended/known?

Additionally, when I set selectOnTab to false, when the search list is not visible it still gains focus, does it need a tabindex="-1" set so that it's taken out of tab order when not visible?

Here's how I am using the component

<SimpleTypeahead
        :id="inputId"
        @keyup.enter="submit"
        @onFocus="inputFocused"
        :selectOnTab="false"
        :class="[$style.autoSuggestItem, { [$style.fullWidthInput]: isFullWidth }]"
        :items="suggestions"
        :minInputLength="1"
        :itemProjection="
          (item) => {
            return item.name;
          }
        "
        @selectItem="setSelectedItem"
        @onInput="inputChanged"
        :placeholder="showItemPlaceholder ? itemPlaceholder : ''"
      ></SimpleTypeahead>

Thanks!

When I insert the component inside a modal when selecting an element with [mouseenter] it closes the modal, with the [TAB] or [ENTER] key it does not happen. Can you help me, please

Would it possible to create a function to clear the input?

I realize I can clear the input using a reference to the variable (which I am doing now) but something less coupled would be nice.

It is hard to rewrite CSS, especially with the tailwind framework.

.simple-typeahead
    .simple-typeahead-input
    .simple-typeahead-list
        .simple-typeahead-list-item &.simple-typeahead-list-item-active
            .simple-typeahead-list-item-text

And it will be more reusable component.

When using the component, if I haven't started typing anything and I hit arrow up/down I am getting these errors in console. Is there a null check missing on the active_node or is it user error? Thanks!

This is how I am using the component:

<SimpleTypeahead
        :id="inputId"
        @keyup.enter="submit"
        @onFocus="inputFocused"
        :selectOnTab="false"
        :class="[$style.autoSuggestItem, { [$style.fullWidthInput]: isFullWidth }]"
        :items="suggestions"
        :minInputLength="1"
        :itemProjection="
          (item) => {
            return item.name;
          }
        "
        @selectItem="setSelectedItem"
        @onInput="inputChanged"
        :placeholder="showItemPlaceholder ? itemPlaceholder : ''"
      ></SimpleTypeahead>

Uncaught TypeError: active_node is null
    scrollSelectionIntoView vue3-simple-typeahead.esm.js:114
    setTimeout handler*scrollSelectionIntoView vue3-simple-typeahead.esm.js:110
    onArrowDown vue3-simple-typeahead.esm.js:98
    ../../node_modules/vue3-simple-typeahead/dist/vue3-simple-typeahead.esm.js/render/_cache[4]< vue3-simple-typeahead.esm.js:234

Uncaught TypeError: active_node is null
    scrollSelectionIntoView vue3-simple-typeahead.esm.js:114
    setTimeout handler*scrollSelectionIntoView vue3-simple-typeahead.esm.js:110
    onArrowUp vue3-simple-typeahead.esm.js:106
    ../../node_modules/vue3-simple-typeahead/dist/vue3-simple-typeahead.esm.js/render/_cache[5]< vue3-simple-typeahead.esm.js:234

I think it would be great if we make a prop ("maxInputLength" for example) that would give the developer the ability to put a maxLength for his typeahead component.

If you are using Vue as a standalone script and using the browser bundle in a script tag like

<script src="https://unpkg.com/vue3-simple-typeahead"></script>

then the import and app.use(SimpleTypeahead) won't work.

Instead, I got it working with:

const { createApp } = Vue

var vm = createApp({
 ...
})
vm.component('vue3-simple-typeahead', Vue3SimpleTypeahead)
vm.mount('#app')

Especially knowing about the (new?) module name Vue3SimpleTypeahead instead of SimpleTypeahead would have saved me some investigation and digging.

Dear developer(s),

I want to modify the items on the fly. Let's say the items are addresses coming from an external CDN, and they can be modified at any time. I just want to ajax and set that list - but how to do it? I even tried:

const selectItem=function(input) {
input.items = ['a', 'aa', 'b', 'cc'];
}

with no luck.

Hello, I'm trying to modify the search behaviour to be hyphen insensitive so when the user types "Alava", he will get a result "Álava" as a match. I wonder if we could have a similar function like "item-projection" to define the search behaviour.

Many thanks

I have set the items array with ajax return and I'm trying to set default items to show a value if this field was empty.
Both vars are settled correctly, but the simple-typeahead component is still blank.

Is there possible to do it?

Hi!

Tried your component with Inertia and got errors with the example code - later on noticed it's because the example is not correct - please remove the dots (,...) so others have a better experience :items="['One','Two','Three',...]"

evo42@9a8217c

eslit rule privent naming atributes like this
:minInputLength= :itemProjection=

https://eslint.vuejs.org/rules/attribute-hyphenation.html

So it lint auto fix problem it can make module fail and long chase for error to user.

need to add in eslint
"vue/attribute-hyphenation": ["error", "always", {
"ignore": []
}]

So, can you change naming for convention purposes.

Love your work!

Hi,
How do I make the item list open when the input gets focus? (Like you're doing in the second demo).
Btw you should add the relevant code for each demo :)

Regards, Anders