meteor-community-packages / meteor-autocomplete Goto Github PK

I am having issues getting textareaAutocomplete working.
If I use inputAutocomplete or remove {{> UI.contentBlock}} from the inputs.html file, it works fine.

Love the package! When I run the project in the examples directory, I get this error:

While building package caret-position:
error: File not found: component/index.js

Needs to use the new rendering system: https://github.com/meteor/meteor/wiki/Using-Blaze.

No {{{ }}} will be allowed etc.

For example, in the demo if the text and cursor is

@aa|aa

The expected behavior would be to only show the aaaa record, but the current behavior is to show all strings starting with aa. This was copied from the original behavior in jquery-sew which looks for the string from the last token occurrence to the current cursor position, which is then passed to the rule regexes for processing.

Although the unexpected behavior from this rarely manifests in practice, a smarter way to do it would be to search up to the first word boundary after the cursor (or even a custom separator as proposed in this commit) and do the autocomplete as normal. However, I don't see a straightforward way to doing this via regexes without some unnecessarily complicated logic.

This issue was moved out of the README in this commit.

Many of links to examples in documentation doesn't exists

Check:
SERVER-SIDE AUTOCOMPLETION AND TEXT SEARCH ENGINES
EXAMPLE

TODO - need to push some minimal reproduction code, but thought I'd throw this out there overnight.

I have a navbar with a token-less autocomplete input in it. The autocomplete picks a company from a list of companies, with the callback calling Router.go() to a page about that company. Demo at http://stockbase.co:3000/

After the first Router.go(), onKeyUp returns every time because @$element is undefined. Do I need to re-render the control somehow?

Instead of Collection.find({}) it would be nice to specify parameters in the rules so that it will query something like Collection.find({type: "showInAutocomplete"});

return AutoCompleteRecords.find({}, options) if isServerSearch(rule) needs to take a selector instead of {}.

I'm getting a undefined error when searching on profile fields. The fields appear in the autocomplete overlay but as soon as one is chosen the result placed into the text input appears as "undefined". Searching on non profile fields such as username does not exhibit this error.

I do still get the data object in my callback however so that is good.

This is what my rules config looks like

return {
   position: "bottom",
   limit: 5,
   rules: [
     {
       token: '@',
       collection: Meteor.users,
       field: "profile.name",
       template: Template.addFriendAutoComplete,
       callback: function(doc) { console.log(doc); }
     }
   ]
  }

Hi,

When using space as token (token: ' ') it works untill reactive data has changed. And we get this:

Exception from Deps recompute function: TypeError: Cannot read property 'template' of undefined
    at AutoComplete.AutoComplete.currentTemplate (http://localhost:3030/packages/autocomplete.js?61a337ba64b04a2913ac3f7823bff5325a790495:724:36)
    at Object.Template._autocompleteContainer.itemTemplate (http://localhost:3030/packages/autocomplete.js?61a337ba64b04a2913ac3f7823bff5325a790495:835:13)
    at UI.Component.lookup (http://localhost:3030/packages/blaze-layout.js?58621fa8e3ed65d10240815d5ba3fb34e2e9fdc5:520:21)
    at Spacebars.call (http://localhost:3030/packages/spacebars.js?f49560fc90a8d71b7637d9596696078881b8c812:173:18)
    at Spacebars.mustacheImpl (http://localhost:3030/packages/spacebars.js?f49560fc90a8d71b7637d9596696078881b8c812:110:25)
    at Object.Spacebars.dataMustache (http://localhost:3030/packages/spacebars.js?f49560fc90a8d71b7637d9596696078881b8c812:142:39)

Thanks.
Pascal

Support for <div contenteditable> would be awesome.

The matching seems to do a split on spaces and only submit the last bit after the space...

The subscription param isn't well documented. Would be easier to implement if it was clearer.

I have typeahead working, the only issue is that the autocomplete menu is getting cut off. I have the input area in a navbar and am using bootstrap-3. From what I've seen online this may have something to do with overflow but I can not seem to find a way around this.

Any help is appreciated!

This package appears to no longer be functioning after updating to Meteor 0.8 inputAutocomplete fails to render an input element

Hi,

I'm trying to use the auto complete package for my TO field list for my messaging and when i integrate it it doesnt show the users list. I am not sure what i did wrong but i just copied the example that you have from the readme file. Can you please confirm on the template in the setting if there should be a format that is needed for that?

From the documentation:

the template that should be used to render each list item. The template will be passed the entire matched document as a data context, so render list items as fancily as you would like. For example, it's usually helpful to see metadata for matches as in the pictures above.

However without an example I'm not 100% sure what you mean, if I want to write a template what handle do I have to the underlying data?

Inserting a <span class="matched"> around matched substrings should do.

For token-less inputs, where any character typed in will trigger the autocomplete menu, it seems to make sense to set the menu's left coordinate to the left of the input box. This is how the major search engines display the menu as well, and on narrow screens, this choice would reduce the chance that the menu scrolls off the right edge of the screen. This can be seen on our production autocomplete in the navbar at stockbase.com

Trigger a onSelectedMatch or onSelectedNoMatch event.

This way we can use helpers like this:

Template.formWithAutocomplete.events({
"onSelectedMatch" : function(e, t, doc){},
"onSelectedNoMatch" : funtion(e, t, doc){}
})

I find that the autocomplete doesn't pop up any results, but the input element does get the "-autocomplete-container" class if there's a trigger character in the string. autocompletion has debugging output

Hello,
I followed your examples in the README and it seems i cannot get this package to work.
I am using meteor 0.7.1.2 and when i hit '@' in my input,

i get this :
Exception from Deps recompute: Error: $options needs a $regex

Great product, btw.

In version 0.3.0 in the processSelection function, the callback is invoked, if present like so:

rule.callback?(doc) # Notify that the item has been selected

please modify to include the rule and the element for context. the element will also aid in making use of unobtrusive javaScript in the callback to link elements or define behaviors.

So maybe something like

rule.callback?(doc, rule, @$element)

Thanks a lot,
Kyle

Would help users trace through the code, to better understand how it works live.

Sample use case: search among company names and stock symbols, a la Google Finance.

So I've created an input:

        <h3>Cause</h3>
        <div class="row">
          <div class="form-group col-md-6">
            {{> inputAutocomplete settings=autocompleteSettings id="cause" name="cause" class="form-control" placeholder="Cause name..."}}
          </div>
        </div>

And I added some settings via the template:

Template.createPayment.helpers
  autocompleteSettings: ->
    position: 'bottom'
    limit: 10
    rules: [
        {
          collection: Cause,
          field: "name",
          matchAll: true,
          subscription: 'causes',
          template: Template.cause
        }
      ]

And then I setup a subscription for the causes:

Meteor.publish 'causes', (selector, options) ->
  console.log 'Subscribing to causes'
  collection = Cause

  sub = this

  # guard against client-side DOS: hard limit to 50
  options.limit = Math.min(50, Math.abs(options.limit)) if options.limit

  # Push this into our own collection on the client so they don't interfere with other publications of the named collection.
  console.log("SELECTOR #{selector}")
  handle = collection.find(selector, options).observeChanges
    added: (id, fields) ->
      sub.added("autocompleteRecords", id, fields)
    changed: (id, fields) ->
      sub.changed("autocompleteRecords", id, fields)
    removed: (id) ->
      sub.removed("autocompleteRecords", id)

  sub.ready()
  sub.onStop -> handle.stop()

I never see the console.log output from the subscription, so I am thinking I did something wrong there? I see the autocomplete come up after I type 2 letters I see the 'no matches' message, so I know some of it is working.

When no element matches element , when you click enter , input is still active and you can see error :
Uncaught TypeError: Cannot read property 'nodeType' of null .

Changing the cursor via mouse does not update the autocomplete menu (due to this being handled in the onKeyUp) function of the AutoComplete class. The only other place this logic is also triggered is in onFocus.

We can simply add an onClick handler to tackle the basic case of this, but it requires more thought to decide what to do for drags and selected regions. Maybe the autocomplete should just go away during that time.

Would it make sense to add an option to disable reactivity, for collections that are supposed to be static on the server, esp. given the ephemerality of the autocomplete drop-down vs. the lifetime of a server-side collection?

Generally, users start typing the beginning of a word or a string. For instance, at the demo page, if I type AS, I'm more likely to be looking for ASBESTOS, rather than ACID WASTE (the example is in stark contrast to the nice fruity one on the left, but that's a different issue ;)

This "preferential matching" is mentioned briefly in the README, but it requires client side support besides a custom publish function. My initial commit implemented it on both sides, and with the added wisdom since, I can submit a patch to bring that option back in a simpler way.

As a further enhancement, records containing the query string starting from a word boundary could be prioritized between those that start with the query string, and the rest (e.g. D should prefer boiler blow Down to aciD vent.

I'm using autocomplete to pull names of volunteers into a text input.

When I select the name, either clicking or using arrow buttons down, it adds a space to the end of the string.

The expected functionality would be to output a field the same way as it is in the collection , wouldn't it?

Is there a setting or a fix for this?

Thanks

When adding this package, the browser console displays warnings:

JQMIGRATE: jQuery.browser is deprecated             jquery-migrate-1.2.1.js:41
console.trace()                                     jquery-migrate-1.2.1.js:43
migrateWarn                                         jquery-migrate-1.2.1.js:43
Object.defineProperty.get                           jquery-migrate-1.2.1.js:58
calculator.getCaretPosition                         jquery.caretposition.js:46
AutoComplete.AutoComplete.positionContainer         autocomplete-client.coffee:247
(anonymous function)                                autocomplete-client.coffee:211
_.extend.withValue                                  dynamics_browser.js:19
(anonymous function)                                timers.js:6
(anonymous function)                                dynamics_browser.js:47
onGlobalMessage                                     setimmediate.js:102

Also, the list of choices is shown as a blank list with only the hovered item displayed, see below. (I'm using the simple Meteor userlist example with the "userPill" template)

It seems this package is highly insecure and allows anybody to to access any data on the server: both collection can be anything and even selector can be anything.

I can't get meteor-autocomplete to work. The <input> is showing, but whenever typing, I get the above mentioned error.

Some code:

return {
 position: "top",
 limit: 5,
 rules: [
   {
     token: '@',
     collection: Recordings,
     field: "name",
     template: Template.autoCompleteTagItem
   }
 ]
}

<template name="autoCompleteTagItem">
  <span class="label">{{name}}</span>
</template>

<template name="tags">
    {{inputAutocomplete newTags}}
</template>

+1 for this

Thoughts on allowing the client to filter the fields returned by the custom subscription?

Use case: the autocomplete at StockBase searches for companies. Each company record contains a host of financial data, but until the user selects one company, the only fields that need to be sent down the wire are basically the company symbol and name.

For server-side autocomplete, should might be better left for the server-side publication.

Your app is crashing. Here's the latest log.

=> Errors prevented startup:

While building the application:
error: no such package: 'autocomplete'

=> Your application has errors. Waiting for file change.

I'm not really sure why this is happening. I used mrt add autocomplete

Likely, this is not an autocomplete issue, but more of a question. Using meteor 0.8.0 and autocomplete 0.3.0, I am running into a strange situation where my autocomplete gets constructed on spacebars more times then init gets called. Deps is firing my spacebars template multiple times -- the last time, the render is not called on the most recently constructed autocomplete objects, leaving the autocomplete empty.

There are no errors. It does appear to be a race condition... If I put a breakpoint in the defs.js file within the meteor packages on the 'pendingComputations.push(this);' line, the second set of constructors are not invoked and the previously constructed and initialized/rendered autocomplete inputs are hooked up.

Does anyone have any idea about what could cause this behavior?

template use below:

                    {{> inputAutocomplete value=User settings=usersettings id='user' class='input-large' placeholder='please type...'}}

user settings below:

            Template.edit_communityGroup.usersettings = function() {
                return {
                    position: "bottom",
                    limit: 5,
                    rules: [
                        {
                            token: '',
                            collection: Meteor.users,
                            field: "emails.0.address",
                            template: Template.userPill,
                            callback: userSelected,
                            subscription: 'allUserData'
                        }
                    ]
                }
            };

Thanks,
Kyle

Doesn't happen often and doesn't seem to break anything as the template is re-rendered later.

Hi,
I implemented this autocomplete and I love it, however it seems to only work with one collection - can it work with multiple at the same time?

So if in settings I limit to 10, and the first collection delivers 7 results and 2nd collection delivers 3, I should see all results. But I only see the results of whichever collection is first declared in the settings. Example:

if (Meteor.isClient) {

Template.autoComplete.settings = function() {
  return {
   position: "bottom",
   limit: 10,
   rules: [
       {
         token: '',
         collection: Customers, 
         field: "name",
         matchAll: true,
         template: Template.autocompleteCustomer
       },
       {
         token: '',
         collection: Clients,
         field: "title",
         matchAll: true,
         template: Template.autocompleteClient
       }
    ]
    }
  };

}

Problem:
When rules array contains 2 separate collections, and are declared together as shown above, only the first one declared in the array will deliver results. So in the example above only the customers will deliver results.

How can I use both collections at the same time?

Thanks,

Is there a way to provide access to Meteor.users.emails. I would like to be able to search through that to provide a back end for admins on my website.

Template.adminUsers.settings = function() {
  return {
   position: "bottom",
   limit: 5,
   rules: [
   {
    token: '!',
     collection: Meteor.users.emails,
     field: "address",
     template: Template.userPill
   }
   ]
 }
};

This returns:

Exception from Deps recompute function: TypeError: Cannot call method 'find' of undefined
    at AutoComplete.AutoComplete.filteredList (http://localhost:3000/packages/autocomplete.js?b7fb758e752aef571db59bd9f847c70b041aaaae:582:28)
    at AutoComplete.Template._autocompleteContainer.empty (http://localhost:3000/packages/autocomplete.js?b7fb758e752aef571db59bd9f847c70b041aaaae:819:15)
    at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2838:23
    at Object.Spacebars.call (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:173:18)
    at UI.Unless.UI.block.self (http://localhost:3000/packages/autocomplete.js?b7fb758e752aef571db59bd9f847c70b041aaaae:89:26)
    at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2564:16
    at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2013:23
    at callWithNoYieldsAllowed (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:74:5)
    at _.extend._compute (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:212:7)
    at new Deps.Computation (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:144:10) 

If there is nothing found in the collection, then display an item specified in settings.

Here's a functioning example of the work I have so far https://github.com/Neobii/meteor-autocomplete/tree/noMatch.

plz

Im currently using this package with almost no issues, however a use case came up in my app where a user may not want the autocomplete template to appear.
Currently I am using the '@' as the starting token, but only want the autocomplete template to appear if it is the start of the word. The token field seems to match any occurance of the character. I have looked through the readme to try and find if there is a way to customize the token field to match an optional whitespace character, but I can't seem to find it. Is it possible to tell the template helper to only appear if there is an optional whitespace character before it or pass the token field a regex to match?

Hello,

I just updated to meteor 0.9.1 and when I tried running the app, the autocomplete template could not be found and broke my whole app. So currently I am using 0.9.0 and it works fine. Is anyone else having this issue?

Is it possible to use this with the autoform package? If so can you give an example of how you would use the two together?

Thanks

It would be nice to have the ability to retrieve the _id from the same record that matches the autocomplete string. For example the _id for a record that was matched to a profile field search such as "name" which may not be unique. These fields could then be used in a hidden form input if needed.

From @johntday

How do I use your package if I don't have a starting delimiter? That is, my text field is just a simple form entry field that I want to autocomplete.

@kevinzenghu and I are working on this now. I think the best way to do this is to have single-collection autocomplete if an array is not passed in for the rules argument, and to not use the token in that case. Any other suggestions?

UPDATE if jquery-caret-position-getter is no longer maintained, it might make sense to look for an alternative library. I've linked below all the (x,y) pixel coordinate care position libraries I could find on GitHub.

This looks like the most powerful autocomplete package on Atmosphere.

After scanning the README, it's unclear though if it works without a trigger character, e.g. if I just have an input element and start typing, like the autocompletion package. Would be great if it did that, and if the docs mentioned it. Thanks!