Typeahead / autocomplete integration

[albertovilla]

Hi,

I would like to use typeahead (https://atmospherejs.com/sergeyt/typeahead) along with meteor-editable-text. Do you think is feasible? Have you tried something similar?

I have look at it but I don't know how to integrate meteor-editable-text syntax with the one on typeahead

<input class="form-control typeahead" name="team" type="text"
       placeholder="NBA and NHL teams"
       autocomplete="off" spellcheck="off"
       data-sets="teams"/>

Thanks

[JackAdams]

Sorry about the late reply. This doesn't look like it's possible right now. I'll look at adding an api to put custom attributes on the input element -- that should help.

[clemsos]

Is autocomplete from db records possible or available already ? What will be a good approach to create one ? Thanks for the nice work ! Super useful

[JackAdams]

I can't think of a way to do autocomplete yet. Which autocomplete package are you looking at?

[clemsos]

Well, I wasn't thinking about adding another autocomplete package. With Meteor what you need is just a small regexp on the client. You query for the first characters on keyup event, then you can easily append a list of item with the first results returned.

var res =  Collection.find({
            'name' : {
              $regex: event.target.value+"*",
              $options : "i"
            }}, { limit : 20 } ).fetch()

res.forEach( function( r ) {
            $( "ul.search-dropdown" ).append( "<li><a href=# data-id=" + r.data.id + ">" + r.data.name + "</a></li>" )
          } )

Then also may have to add a bit of basic css that can be easily overriden

Here is a working example in one of the project I am working on : https://github.com/topogram/topogram/blob/6fb801d01697bf5191c584d013c85c1200b1890c/imports/ui/components/boxes/searchBox/searchBox.js#L76

About the UI, it will just something like

{{> editableText context=item collection="collection" field="name" autocomplete="true" }}

Do you think it looks doable ?

[JackAdams]

It looks doable. Just wondering - what would the use case for this be?

[clemsos]

Well, for instance let's say you have a list of people belonging to different groups. When you click on "group" to edit it inline, it is useful to know which groups already exist. It really helps to avoid ending up with 3 groups "friends", "Friends" and "friend" - which is always the case...

Of course a select could be easier but you want to let people live create group as well, so autocomplete is a great feature. Another cool use will be tagging.