aupac / ember-aupac-typeahead Goto Github PK

dropzoneSource: Ember.computed(function () {
    const _this = this;
    return function (query, syncResults, asyncResults) {
      var dropzones = _this.get('activeRegisteredDropzones');
      
      var results = dropzones.filter(function(record){
        var dz_name = record.get('dz_name');
        return dz_name.toLowerCase().indexOf(query.toLowerCase()) >= 0;
      });

      console.log('from names: found '+results.length+' dropzones');

      if(results.length<=0) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { "address": query }, function(geoResults, status) {
          if (status == google.maps.GeocoderStatus.OK && geoResults.length > 0) {
            var geoResult = geoResults[0];
            var geoResultLatLng = {latitude: geoResult.geometry.location.lat(), longitude: geoResult.geometry.location.lng()};

            results = dropzones.filter(function(record){
              var dzLatLng = {latitude: record.get('lat'), longitude: record.get('lon')};
              var inside = geolib.isPointInCircle(geoResultLatLng, dzLatLng, 200000);
              return inside;
            });
            console.log('from radius: found '+results.length+' dropzones');
          }
          asyncResults(results);
        });
      } else {
        syncResults(results);
      }
    };
  })

What happens is this:

searching for phrase "Gardiner" produces 3 results, and displays 3
searching for phrase "new york" produces 13 results, but displays ONLY 2

both searches trigger async geo search

what could be the problem?
how would i even start figuring out why some results are not displayed?

Thanks

Hi,

First of all, I love the addon, it's really great.
However, I tried to upgrade my application to Ember 2.10 with Glimmer 2, and i'm running into an issue that I can trace back to this addon.

I don't really understand that much about it to be honest, but if you need any extra information or I can lend a hand, let me know.

ember.debug.js:16911 Error: Cannot instantiate a component without a renderer. Please ensure that you are creating <Ember.Component:ember5407> with a proper container/registry.

Just upgraded a project to Ember 3.1 and this package throws an error when trying to instantiate - TypeError: Cannot read property 'fullName' of undefined.

It looks like the error stems from this code.

I found a similar issue here, and there's a suggested workaround there.

ember-aupac-typeahead currently doesn't load when an application is served with Fastboot.

Attempting to load a page, even in development, shows the following error:

/tmp/broccoli_merge_trees-output_path-nTl1pnyW.tmp/assets/vendor.js:80047
            isArray: $.isArray,
                       ^

TypeError: Cannot read property 'isArray' of undefined
    at /Users/gcheung/dev/fitbit-site-ui/tmp/broccoli_merge_trees-output_path-nTl1pnyW.tmp/assets/vendor/typeahead.jquery.js:36:1
    at /Users/gcheung/dev/fitbit-site-ui/tmp/broccoli_merge_trees-output_path-nTl1pnyW.tmp/assets/vendor/typeahead.jquery.js:160:1
    at /Users/gcheung/dev/fitbit-site-ui/tmp/broccoli_merge_trees-output_path-nTl1pnyW.tmp/assets/vendor/typeahead.jquery.js:15:1
    at /Users/gcheung/dev/fitbit-site-ui/tmp/broccoli_merge_trees-output_path-nTl1pnyW.tmp/assets/vendor/typeahead.jquery.js:17:1

When clearing the field, action is not being called.

Hi! I have related issue twitter/typeahead.js#1381

this can be seen in the demo

in IE scrollbar click closes entire list of suggestions

Hi!

I am using the aupac-typeahead component in my project. In my usecase, the functionality of the source function depends on some properties of the parent component (or controller). However, I can't use this inside the source function to access my component, instead the source function seems to be bound to the jQuery typeahead component. Here is a demonstration twiddle:

https://ember-twiddle.com/6807d81cbaeb475cdb115ed16b8890d1?openFiles=controllers.application.js%2C

Do you have a suggestion how I could solve this problem?

Best,
Matthias

Hi!
I uses component like this:

{{aupac-ember-data-typeahead placeholder="VIN" modelClass='vehicle' displayKey='vin' allowFreeInput=true queryKey='vin' minLength=5 action=(action 'getVehicle')}}

getVehicle - is just an action with console.log(value)
When I'm selecting item from a list of suggestions, I'm seeing ember model in the console, but when I'm pressing tab or clicking to another input I'm seeing another one output from the action — this time it's just a string.

Can you help me to understand, what am I doing wrong?

Steps to recreate on ember-aupac-typeahead 3.1.x and the following code:

      {{aupac-typeahead
        action=(action (mut searchInput))
        placeholder=placeholder
        allowFreeInput=true
        source=(action "searchAsync")
        async=true
        selection=(readonly searchInput)
      }}

1. Input "text" into search field
2. Using another action, clear searchInput (i.e. this.set('searchInput', '');)
3. Input "text" into search field again
4. No update occurs.

This issue does not occur if you use a different search term (i.e. "text" followed by "text_")

Thank you for this wonderful addon!
Is this addon support for multi select?

Installed via ember cli.
Attempted a clean install of node_modules and bower files, made no difference.

yarn dependencies:
"ember-cli": "2.14.0"
"ember-aupac-typeahead": "git://github.com/aupac/ember-aupac-typeahead#master"

Launching project yields the following error:

ember serve
Livereload server on http://localhost:49153
Serving on http://localhost:4200/
The Broccoli Plugin: [SourceMapConcat: Concat: Vendor /assets/vendor.js] failed with:
Error: ENOENT: no such file or directory, open '*PROJECT*/tmp/source_map_concat-input_base_path-vS6fJHUI.tmp/vendor/typeahead.jquery.min.js'
    at Object.fs.openSync (fs.js:558:18)
    at Object.fs.readFileSync (fs.js:468:33)
    at SourceMap.addFile (*PROJECT*/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
    at *PROJECT*/node_modules/broccoli-concat/concat.js:200:16
    at Array.forEach (native)
    at Concat.<anonymous> (*PROJECT*/node_modules/broccoli-concat/concat.js:198:24)
    at *PROJECT*/node_modules/fast-sourcemap-concat/lib/source-map.js:393:12
    at initializePromise (*PROJECT*/node_modules/rsvp/dist/rsvp.js:589:5)
    at new Promise$1 (*PROJECT*/node_modules/rsvp/dist/rsvp.js:1077:33)
    at SourceMap.end (*PROJECT*/node_modules/fast-sourcemap-concat/lib/source-map.js:380:10)

The broccoli plugin was instantiated at:
    at Concat.Plugin (*PROJECT*/node_modules/broccoli-plugin/index.js:7:31)
    at new Concat (*PROJECT*/node_modules/broccoli-concat/concat.js:38:10)
    at module.exports (*PROJECT*/node_modules/broccoli-concat/index.js:26:10)
    at EmberApp.concatFiles (*PROJECT*/node_modules/ember-cli/lib/broccoli/ember-app.js:397:10)
    at EmberApp._concatFiles (*PROJECT*/node_modules/ember-cli/lib/broccoli/ember-app.js:410:15)
    at EmberApp.javascript (*PROJECT*/node_modules/ember-cli/lib/broccoli/ember-app.js:1286:12)
    at EmberApp.toArray (*PROJECT*/node_modules/ember-cli/lib/broccoli/ember-app.js:1668:10)
    at EmberApp.toTree (*PROJECT*/node_modules/ember-cli/lib/broccoli/ember-app.js:1690:30)
    at module.exports (*PROJECT*/ember-cli-build.js:52:14)
    at Builder.setupBroccoliBuilder (*PROJECT*/node_modules/ember-cli/lib/models/builder.js:54:19)

Currently working in an open source project that uses ember-aupac-typeahead. This module appears to place a div behind the search bar with a white background and the use of !important on this div makes it difficult to use this module while doing custom styling. I see that !important is used in multiple places in the .css file, but the lines that gave me issue were these:

.aupac-typeahead.tt-hint[readonly] {
  background-color: white !important;
}

I would suggest refactoring to remove all instances of !important.

1. Remove all dependencies on bower.
2. Update to latest version on ember-cli.

Will accept a pull request implementing this feature.

1. computed.reads('selection') does not seem to fire observers when 'selection' is set to null.
2. aupac-ember-data-typeahead - even if the above is fixed, if a setValue is called with an object and then to null, value will magically update with the previous model name once the promise is resolved.

See my issue at Dhaulagiri/ember-cli-twitter-typeahead#12 This add-on seems to be better maintained (and more full-featured). I'd love to see a bit more of a generic NPM package name though ;-)

Add unit tests.

How to set the tabindex ?

I tried (quickly) by adding an attribute binding for tabindex,
but that does not seem to work ...

Is there some other way to set the tabindex (from a template) ?

Cleanup the API

• consistent and intuitive way to modify the selection/suggestion results as #14
• improve DELETE behaviour to be more user friendly #29
• Use components instead of templates #12
• Rename to ember-typeahead #7
• Add more tests and specifically cover all scenarios.
• Path to Glimmer Components (angle bracket components)
• Reduce rather than increase component parameters.

Will consider breaking the existing API if the gain calls for it.

This issue is open for discussion about a better user experience with this addon. Feel free to express the frustrating points of the api.

I just upgraded to Ember 2.11 and aupac-typeahead is not working anymore.

It seems to be related to the creation and rendering of components: http://emberjs.com/deprecations/v2.x/#toc_code-rendertoelement-code

I'm finding the use of a CHANGELOG.md is a huge help when using a number of different add-ons and periodically upgrading them. Here's an example of a change log that's saved me a ton of headaches over time: https://github.com/simplabs/ember-simple-auth/blob/master/CHANGELOG.md

Would it be possible to start using one for this add-on as well?

It seems that the selection property is fixed and set globally for each page's scope. This means that if you have two typeahead autocomplete components on the same page, they will override each other's selection property, making it impossible to use two at the same time.

I think it would make the most sense for this component to require you to pass the name of the selection property to change where the selected value is stored, thus allowing you to use as many as necessary.

Need to rerender the component when the disabled property is changed as the mask does not update the disabled attribute.

Hi,

I am unable to use "this" inside countrySource method.
using this.get or calling this.somefunction gives error.

In hbs file:
{{aupac-typeahead action=(action (mut searchCriteria)) class='form-control' source=countrySource placeholder='Search for a country'}}

In component js:
countrySource : function(query, syncResults, asyncResults) { console.log(query); console.log(this.get("searchCriteria")); //syncResults(results); },

The error which i am getting is:
TypeError: this.get is not a function

Can anyone please point out if I am missing anything?
Am new to Ember and have exhausted all search possibilities.

Update: I understand that "this" in countrySource method is jquery context. Is there any way to get controller context in this method.

Regards

Hi,

We are using page objects for our testing and I noticed that ember-aupac-typehead comes with its own helper to construct page objects for typeahead components. However, I can't figure out how to import this helper in my tests. Could you give me a hint? I guess I have to import something in tests/helpers/start-app.js but nothing I have tried so far worked...

Best,
Matthias

It looks like it's due to the use of the ember-cli-htmlbars dependency (https://github.com/aupac/ember-aupac-typeahead/blob/master/package.json#L58) and it's use in the component (https://github.com/aupac/ember-aupac-typeahead/blob/master/addon/components/aupac-typeahead.js#L204)

You've got the most feature complete typeahead add-on in the Ember ecosystem right now (I've just been doing some thorough research on it ;-), so I'd love to use yours. But not sure I can justify the increase in payload size. Any way that we might be able to change things around so the Handlebars system doesn't need to be loaded?

Hello ––let me first say thanks for the great addon!

I was experimenting with width auto, and overflow visible and ran into a conflict with liquid fire requiring overflow hidden.

Wondering if anyone has addressed this –– either in this addon or in a project. It occurred to me that perhaps this could use tether to get around this? – I could take a look at implementing if it would be of interest as a pull request.

I have an application with ember 1.13.13 and using the aupac-typeahead component without any custom templates.

The suggestions are an array of string, no model, complex object or anything.

Previously with the 2.0.7 version the highlight was working fine, since I upgraded to the 2.1.2 I lost the highlight.

Looking at the piece of code doing the actual work in typeahead I noticed that the DocumentFragment received was only containing the ember placeholder <!-- -->, not the actual rendered template with the suggestion.

Do you have any idea how could fix this issue ? Thanks!

Any thoughts on trying to integrate https://github.com/corejavascript/typeahead.js/ instead of what looks like the no longer maintained version of it?

Hi! I'm using the component and in the queryKey I need to pass something like this:

queryKey='filter=company-name'

The problem is that the component is encoding the = next to filter and because that the API is not returning the corresponding results. How can I do in order to not enconde the queryKey?

Thanks in advance!

Hi,

I am unsure on how to set the suggestion value. For example

The first result should say 'Test', the object contains a value called companyName which I would like to use.

My handlebar looks like this
{{aupac-typeahead action=(action (mut typeAheadCase)) class='form-control' display=source.companyName source=assignToCases placeholder='Search for a case'}}

There's an issue with {{aupac-typeahead}} where deleting a single character in the input removes the entire input value. This is very annoying for correcting typos.

This is happening when suggestions are objects (which we fetch from an api).

Basically it looks like this gets called when I press backspace
this.get('_typeahead').typeahead('val', '');
(line 79 in addon/components/aupac-typeahead.js)

ember-cli-htmlbars seems to expect ember to be in bower.json. Without that bower dependency, running ember serve results in a crash due to a missing dependency of ember-template-compiler:

Cannot find module '/Users/robertbenjamin/Work/ember-aupac-typeahead/bower_components/ember/ember-template-compiler'
Error: Cannot find module '/Users/robertbenjamin/Work/ember-aupac-typeahead/bower_components/ember/ember-template-compiler'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Class.htmlbarsOptions (/Users/robertbenjamin/Work/ember-aupac-typeahead/node_modules/ember-aupac-control/node_modules/ember-cli-htmlbars/ember-addon-main.js:70:25)

I'm at a bit of a loss for how to move forward, even the updated releases of ember-cli-htmlbars seems to still rely on using a Bower-installed version of Ember for the template compiler. If anyone has any suggestions for fixes (or if I'm missing something), I'm all ears.

Hello,

First thank you very much for this library.
It does mostly what I need and save me a fair amount of work.

The only thing I was able to configure, is a way to allow free inputs.

This is definitively possible on the original typeahead library, but I could not find a way to avoid having the control being emptied when the user does not make a selection.
I found a workaround by adding the query text to the top of the result, but it does not quite feel right.

Is it possible to allow free input ?
If yes, how ? Would it be possible include the explanation in the documentation ?
If no, could this be implemented ?

Thank you.
ymh

PS: to explore, I have tried to use the setValue property, but coud not really find how. When examining your code I am not sure that this property is really usable from "outside". If I am wrong, would it be possible to have a code example for this ? (something like reproducing the same functionality than the default value but adding a log of the argument, for example). thx.

As of Ember 2.12, Ember no longer installs Bower to manage dependencies since it's a bit redundant when it NPM performs the same task.

It'd be nice to move the 4 dependencies in bower.json (pretender, faker, bootstrap, and corejs-typeahead) to package.json and reference them from their location in node_modules instead of the bower directory.

This is something I'm hoping to tackle this weekend but I just wanted to make an issue first to see if you guys had any thoughts!

Still not working in 2.10.0, typo was actually a downgrade to 2.1.0.

Hi!

In my opinion it would be nice to be able not to only specify template but also the component for typeahead templates. Recently I've had to create a footer with custom action and this is what I've came to:

import Ember from 'ember';
import AupacTypeahead from 'ember-aupac-typeahead/components/aupac-typeahead';

const {run, Component} = Ember;

const Key = {
  BACKSPACE : 8,
  DELETE : 46
};

export default AupacTypeahead.extend({
  suggestionComponent: Component,
  notFoundComponent: Component,
  pendingComponent: Component,
  headerComponent: Component,
  footerComponent: Component,

  initializeTypeahead() {
    const self = this;

    //Setup the typeahead
    //noinspection ChainedFunctionCallJS
    const t = this.$().typeahead({
      highlight: this.get('highlight'),
      hint: this.get('hint'),
      minLength: this.get('minLength'),
      classNames: this.get('typeaheadClassNames')
    }, {
      component: this,
      name: this.get('datasetName') || 'default',
      display: this.get('display'),
      async: this.get('async'),
      limit: this.get('limit'),
      source: this.get('source'),
      templates: {
        suggestion: function (model) {
          const cmp = self.get('suggestionComponent');

          //noinspection ChainedFunctionCallJS
          const item = cmp.create({
            model: model,
            layout: self.get('suggestionTemplate'),
            parentView: self
          }).createElement();
          return item.element;
        },
        notFound: function (query) {
          const cmp = self.get('notFoundComponent');

          //noinspection ChainedFunctionCallJS
          const item = cmp.create({
            query: query,
            layout: self.get('notFoundTemplate'),
            parentView: self
          }).createElement();
          return item.element;
        },
        pending: function (query) {
          const cmp = self.get('pendingComponent');

          //noinspection ChainedFunctionCallJS
          const item = cmp.create({
            query: query,
            layout: self.get('pendingTemplate'),
            parentView: self
          }).createElement();
          return item.element;
        },
        header: function (query, suggestions) {
          const cmp = self.get('headerComponent');

          //noinspection ChainedFunctionCallJS
          const item = cmp.create({
            query: query,
            suggestions: suggestions,
            layout: self.get('headerTemplate'),
            parentView: self
          }).createElement();
          return item.element;
        },
        footer: function (query, suggestions) {
          const cmp = self.get('footerComponent');

          //noinspection ChainedFunctionCallJS
          const item = cmp.create({
            query: query,
            suggestions: suggestions,
            layout: self.get('footerTemplate'),
            parentView: self
          }).createElement();
          return item.element;
        }
      }
    });
    this.set('_typeahead', t);

    // Set selected object
    //noinspection NestedFunctionCallJS
    t.on('typeahead:autocompleted', run.bind(this, (jqEvent, suggestionObject /*, nameOfDatasetSuggestionBelongsTo*/) => {
      this.set('selection', suggestionObject);
      this.sendAction('action', suggestionObject);
    }));

    //noinspection NestedFunctionCallJS
    t.on('typeahead:selected', run.bind(this, (jqEvent, suggestionObject /*, nameOfDatasetSuggestionBelongsTo*/) => {
      this.set('selection', suggestionObject);
      this.sendAction('action', suggestionObject);
    }));

    //noinspection NestedFunctionCallJS
    t.on('keyup', run.bind(this, (jqEvent) => {
      //Handle the case whereby the user presses the delete or backspace key, in either case
      //the selection is no longer valid.
      if (jqEvent.which === Key.BACKSPACE || jqEvent.which === Key.DELETE) {
        //noinspection ChainedFunctionCallJS
        const value = this.get('_typeahead').typeahead('val'); //cache value
        this.set('selection', null);
        this.sendAction('action', null);
        this.setValue(value); //restore the text, thus allowing the user to make corrections
      }
    }));

    //noinspection NestedFunctionCallJS
    t.on('focusout', run.bind(this, (/*jqEvent*/) => {
      //the user has now left the control, update display with current binding or reset to blank
      const model = this.get('selection');
      if (model) {
        this.setValue(model);
      } else {
        this.setValue(null);
      }
    }));
  }
});

Notice that I've had to copy almost all the code just to change small part of it :)

Upgraded to ember 2.2.0 and ember-data 2.2.

This code:

{{aupac-ember-data-typeahead
                            class='form-control'
                            modelClass='organization-unit'
                            placeholder="Org unit"
                            queryKey='search'
                            selection=model.profile.ou
                            action=(action (mut model.profile.ou))}}

Generates this error:

Uncaught RangeError: Maximum call stack size exceeded
get @ ember.debug.js:19736AliasedProperty_
get @ ember.debug.js:13046
get @ ember.debug.js:19745
lazyGet @ ember.debug.js:13858ChainNode.value 
@ ember.debug.js:13872ChainNode.notify 
@ ember.debug.js:14008ChainNode.notify 
@ ember.debug.js:14024ChainWatchers.notify 
@ ember.debug.js:13745ChainWatchers.revalidate 
@ ember.debug.js:13724overrideChains 
@ ember.debug.js:19589

After debugging, I found that removing this computed CP:

  // shadow the passed-in `selection` to avoid
  // leaking changes to it via a 2-way binding
  _selection: computed.reads('selection'),

Error disappeared, but now it does not display initial value,

Any ideas of fix ? I'll look into this as well.

The typeahead action is being fired when allowFreeInput=true and user clicks off the input. I expect the action to fire if the user performs the following:

• Return key
• Mouse select
• Mobile touch

ember-twiddle

appplication.js

import Ember from 'ember';

const skills = ['Python', 'Javascript', 'Django']

export default Ember.Controller.extend({
  skill: null,
  skillSource: function(query, syncResults, asyncResults) {
    const regex = new RegExp('.*' + query + '.*', 'i');
    const results = skills.filter((item, index, enumerable) => {
      return regex.test(item);
    })
    syncResults(results);
  },
  actions: {
    selectSkill(skill) {
      console.log('selectSkill action fired');
      this.set('skill', skill);
    }
  }
});

application.hbs

{{aupac-typeahead 
    action=(action "selectSkill") 
    source=skillSource 
    allowFreeInput=true
}}
<br/>    
<b>Selected</b>: {{skill}}
{{outlet}}

When using objects instead of strings as suggestions free input is always allowed and allowFreeInput doesn't have any effect.

Hello,

First thank you very much for this useful ember extension.

I recently tested my application under ember v2.8.0-beta.2 and have the following errors in console wen
TypeError: Component.create(...).createElement is not a function.
I traced that the error comes from the following location addon/components/aupac-typeahead.js# initializeTypeahead when using the createElement method.

This seems to comes form the following commit in ember : emberjs/ember.js#13892 that remove the createElement method.

Regards,

ymh

Hi,

I have an app which uses many instances of ember-aupac-typeahead in one page. When I enter the corresponding route, all typeahead components are populated via the selection property. I just noticed that in this moment, all of them trigger the source function to request search results. This doesn't seem to make sense to me, since at this point the user has not interacted with the component and in my case this creates around 50 ajax-requests to the API which take a lot of time to process. Is this on purpose or is it a bug?

I created an ember twiddle to demonstrate the problem:
https://ember-twiddle.com/328c04b3f57f7ba90f7f502447a58927?openFiles=controllers.application.js%2C

The application template shows an ember-aupac-typeahead component which is prefilled via selection. The template shows whether a search request has been triggered so far. It switches to "results have been requested" immediately when the page loads.

Best,
Matthias