hakib / massautocomplete Goto Github PK

Hi,

The suggest function is not triggered when the user hit space.

In my app, I would like to implement a feature where I can look up the document I parsed for list of words so that: "development" and "development " give different suggestions.
Is this possible to trigger a new suggestion with ending space?

Thanks.

Hello I wonder if the option of using the arrow keys up/down in case there scroll, are supported to move. Why me not working me...

Hi. When would the 0.2.3 version be published in bower? I'm stil waiting for my commits in production, don't want to install it from my fork.

Btw, you didn't fix the version in bower.json.

Im using mass-autocomplete directive to wrap all my page, as I have autocompleted input everywhere in the page.
Problem is that the directive creates a child scope.
So all the variables that have been initialized by the controller are shaded by a new variable in the child scope. When I modify a variable with an input for example, i only change the child version, not the 'real' one.
The problem doesnt occur when the variable is an object, as only the reference is copied in the child scope.
See example here: http://jsbin.com/tevagiciji/edit?html,js,output

Do I have a wrong usage of mass-autocomplete ? How to overcome this problem ?

Thank you

In angular, the item should allow arrays, objects, and any notation so long as it points to a valid object on the scope.

http://jsbin.com/dewukirimo/1/

The following throws an error on any notation besides for a string notation.
var options = scope[attrs.massAutocompleteItem];

Instead, scope isolation should be used to retrieve the property through angular.

How can I change the module's template?

Could you give me some idea how to clear the user input if no match with the results.
I want force user to select from the results list.

Thanks in advance.

Victor

JSbin with issuee:
http://jsbin.com/xirukapuho/1/edit?html,css,js,output

When the dropdown is on a fixed element, floating somewhere below the top of the page, the dropdown position is calculated incorrectly. I think this is due to the fact that the position is calculated relative to the document, but the absolute style is relative to the parent.

This could solved by finding the directive element's offset from the top of the page (and left) and subtracting from the position value.

Love the directive btw.

I would like to be able to capture the input ng-model when the user simply enters a value and presses enter and has not selected a filed from the autocomplete list. Is this possible with the MassAutocomplete API?

hello again

a new example I added an id to your last example

to bind the name/id i must to select the name twice
the first selection massautocomplete suggest only one
and is in the second select when does the binding

You can see an example here

http://plnkr.co/edit/JIQ9ql?p=preview

would be nice can to clean selected_user values when you change the value of the autocomplete field.

Getting Uncaught TypeError: m.suggest is not a function when starting to type.

<div mass-autocomplete>
   <input class="form-control"  ng-model="client"  mass-autocomplete-item="client_names">
</div>  

Angular: v1.3.15

I was having trouble selecting suggestion items when clicked outside the text. I think it is better if you make your whole 'li' element clickable by simply moving ng-click directive to li

'<li ng-repeat="result in results" ng-if="$index > 0" ' +
      'class="ac-menu-item" ng-click="apply_selection($index)" ng-class="$index == selected_index ? \'ac-state-focus\': \'\'">' +
     '<span ng-bind-html="result.label"></span>' +
 '</li>'

Also, if the user types in the box but doesn't select from suggestions and the typed text matches with an item in suggestions, then we can force selection on blur.

When including MA on a page that has a fairly default content security policy (CSP) set, it triggers, because MA tries to inject a stylesheet into the page.

This is my CSP:

  <meta http-equiv=Content-Security-Policy content="default-src 'self'; script-src 'self' https://ajax.googleapis.com">

And the error thrown because of MA:

13:55:40.528 Content Security Policy: The page's settings blocked the loading of a resource at self ("default-src http://192.168.178.39:3000"). Source: position:absolute;. 1 192.168.178.39:3000

A possible solution is to respect the presence of the ng-csp directive (and settings thereof). To get styles onto an element, you'd need to somehow provide (perhaps simply through documentation) a separate piece of stylesheet that developers have to include in their existing stylesheets.

Is it possible to list down suggestion list when user click on the field (before typing anything)?

Not sure if there is a clean way to do this but it would be nice to force a selection from the menu so the input is invalid if the input is not from the options.

Just something I think would be very useful .

Thanks for the previous fix.

I am also getting errors with the following section when I navigate away from the page without putting anything into the input box.

     // Clear references and events.
        $scope.show_autocomplete = false;
        angular.element($window).unbind(EVENTS.RESIZE);
        value_watch();

Fixed with simple check.

     // Clear references and events.
        $scope.show_autocomplete = false;
        angular.element($window).unbind(EVENTS.RESIZE);
        if(typeof value_watch !== 'undefined'){
           value_watch();
        }

As recommended in most of the style guides I recently switched to the "controller as" syntax instead of $scope. This seems to be a problem because

 var options = scope[attrs.massAutocompleteItem];

seems to depend on the variable being bound to $scope.

Here is a plunkr that shows the behavior. I don't have a lot of time at the moment, but I will take a deeper look into it and maybe post a pull request with an alternative to the used way.

Edit: Ups, I guess issue #14 already covers that.

Hello,

Would you be able to implement a minimum 3 letter parameter before rendering results please,

Thanks,

I'm using Angular 1.2.8 (upgrading is not an option).

The very first time I enter text in the typeahead input, I receive the suggestion list just fine. If I click anywhere or type some more in the box after that, I get the following error:

TypeError: Cannot read property 'querySelectorAll' of undefined
    at cancelChildAnimations (angular-animate.js:807)

As a result, the suggestion list never updates (though the XHR which populates it returns its data just fine).

Here's a snippet of my template:

<label for="mgrFilter">Manager:</label>
<div mass-autocomplete>
    <input ng-model="manager" mass-autocomplete-item="macOptions" />
</div>

Here's a snippet of my controller:

var addSelection = function(selected) {
    $scope.manager = selected.value;
};

var managerTypeahead = function(term) {
    var deferred = $q.defer();

    managers.get(term).then(function(res) {
        var formatted = [];

        for (var i = 0; i < res.length; ++ i) {
            formatted.push({
                label: res[i].firstname + ' ' + res[i].lastname + ' (' + res[i].uid + ') ' + res[i].title,
                value: res[i].uid
            });
        }

        deferred.resolve(formatted);
    });

    return deferred.promise;
};

$scope.macOptions = {
    on_select: addSelection,
    on_error: console.log,
    suggest: managerTypeahead
};

I am using the workaround for a parent with position: fixed; presented in #13, but I doubt that has anything to do with it.

Jquery is unecessary here and can be easily dropped.

Dear @hakib,

first of all thanks for this great directive and the variety of options for its configuration.
Great job!

My goal is to bind the value of the input to a $scope.variable however it is not binding. My workaround as of now is to assign the term to a $scope.variable when fuzzy_suggest gets called

function fuzzy_suggest(term) {
            if (!term) {
                // filter assignment
                $scope.searchText = '';
                return [];
            }
            // filter assignment
            $scope.searchText = term;

this however only gets called as long as there is at least one character in the input field - not when the input is empty line 128.

function _suggest(term, target_element) {
        $scope.selected_index = 0;
        $scope.waiting_for_suggestion = true;
        if (typeof(term) === 'string' && term.length > 0) {

I am sure that I am missing something and would thus be grateful for a quick hint, what I can do to always extract the value of the input {{input}}

Thanks a lot.

Best,
Karl

Hi! Thanks for your amazing work, is there a way to trigger the suggestion box on button click?

Assume a user selected something from the autocomplete box and then clears the input text field. Would be great to have an on_unselect event similar to the on_select event.

Can you add an option to make autocompleting easier, where the first suggested item is highlighted and can be selected immediately when you hit enter? Similar to typeahead-focus-first in ui-typeahead?

If you press down arrow it highlights first row, if you now hover the mouse it highlights the different row, but it leaves the highlight on the row highlighted by the up/down arrow keys.

There should only be one highlighted row when you hover it should replace the previously highlighted row.

(if you press an up or down arrow this should start from currently highlighted row even if that was highlighted by mouse)

Hi,

can I install the plugin via npm? We try to move from Bower to npm and it seems that MassAutocomplete is not registered in npm registry.

Publishing a package should be quite straightforward: https://gist.github.com/coolaj86/1318304

What do you think about this suggestion?

Have a nice day,
Martin

http://gofore.com/ohjelmistokehitys/stop-using-bower/

I've noticed that as the autocomplete loads results, as soon as the user starts typing again, they temporarily disappear until the new ones are loaded again. As a result, when typing a query and briefly pausing multiple times, the autocomplete keeps flashing on/off, which is distracting.

I think it'd be a good enhancement to (perhaps optionally?) keep the original results loaded in the autocomplete until the new results are ready.

(This is only noticeable when using remote results - local results load quickly enough that there's no flash.)

Hi,

Thanks for this project, really useful!

One quick question: I saw that you apply the 'dot rule' in your examples and, indeed, when you have a ng-model without a dot, MassAutocomplete seems to mess up with the binding.
Is this a known / fixable issue?

Thanks in advance.

If a user types in something that produces suggestions, like typing in 'co' in the first example in the demo, clicking away does not close the suggestions.

I ran into this using a remote source, you can see the same behavior on the Remote source example.

When the user puts a value in the field and then clears it (backspace, cut) the ng-model value updates but the autocomplete does not. It remains visible and populated.

I found that changing part of the watch expression

from

 if (nv === last_selected_value) 
    return;

to

 if (nv === last_selected_value && nv !== undefined) 
    return;

Seemed to fix the issue, but I'm not confident in its place in the wider design of the plugin.

I have this code:

$scope.autocompleteOptions = {
suggest: $scope.suggestContacts,
on_select: $scope.addContactToGuests
};

$scope.addContactToGuests = function(selected) {
$rootScope.contacts.push(selected.contact);
$scope.contact = undefined;
};

But the input wasnt cleaned before de selection. In the example page of MassAutocomplete, it works similary.

Whats wrong? Help me please.

Are they in the pipeline?

The library works great however when I leave the page that contains the module I am hit with

Cannot read property 'unbind' of undefined

I a assume this is because I am using controller as syntax.

Currently the directive will clear (detach) all 'resize' event handlers attached to the Window object when directive's scope is destroyed.

Proposed fix to line 35:

RESIZE: 'resize.massAutocomplete',

I have made a plunker for remote example for help

http://plnkr.co/edit/vTnxfF5hz3w74V5SMY7q?p=preview

Hi,

Tested Ie9 in my own code and on first State selection input on web site under examples. When you type "Ala", the select list appears and you can select as normal. When you click out of field and then back in, change the wording or retype from scratch the suggest doesnt seem to fire as it should.

Once you click out the suggest sometimes fires on blur which shouldnt be the case.

I`m trying to see what the issue is, but not making much progress.

I'm implement this directive in a form inside a bootsrap modal. When I open it in a browser, the suggest box is nowhere to be seen although tab and up&down keys seem to work. Upon close inspection, I found out that the suggestion box is rendered out of view with large top and left style properties :

As you can see above, the suggest box has the following style :

top : 852px
left : 583px

The box does appear as it should when I remove following lines from your __position_autocomplete()

function:

// container.style.top = rect.top + rect.height + scrollTop + 'px';
// container.style.left = rect.left + scrollLeft + 'px';

Is this a bug(maybe due to implementation within bootstrap modal that causes high top and left style values) or am I missing something ?

I am facing a situation where:
1 - I need to refind the already selected value (because I can remove the selection outside the MassAutocomplete component)
What is blocking me is: Line 113

if (nv === last_selected_value)
    return;

I reset my ng-model to "", but the watcher is not triggered.
Is it possible to make it optional?
Thank you very much

When loading http://hakib.github.io/MassAutocomplete/

The content briefly shows and disappears.
I get the following console error

Greetings,

Based on the example for remote source example, the on_select method, when selecting a suggestion from the list, is not executed.
my question is: how can i check the selected suggestion?
using the example from lib's webpage, i made it like this:

$scope.ac_option_remote = { suggest: suggest_state_remote, on_error: console.log, on_select: function (selected) { $scope.selected_user = selected.data; console.log($scope.selected_user); } };

The console.log written, is not showing in developer console (im using gooogle chrome for testing).

edit: im thinking this is not a bug, but posting here could give me some lights about the possible issue.

best regards

Using your examples (http://hakib.github.io/MassAutocomplete/#examples), if input field is selected and you immediately paste a 'valid' value from your clipboard, the suggest function is not triggered. In result, the suggestion popup doesn't appear.

For example;

1. copy 'Alabama' to your clipboard
2. go to first example (i.e. suggest state).
3. focus on the input field and immediately paste the value from your clipboard.

Actual Result: nothing happens.
Expected Result: suggestion popup to appear with one item (i.e. 'Alabama').

Note: if you undo (ctrl+z) and re-paste (ctrl+z), the suggestion popup appears as expected. The issue is appears to be related to the initial focus event.

This has been reproduced in Chrome (v 40.0.2214.115 m) & Firefox (v 37.0.2)

I dont know how to make this code works properly

'home.controller('categoryController', function ($scope, $http, $sce, $q) {

    //var states = ['Alabama', 'Alaska', 'California', 'New york'];

    function suggest_state(term) {
        var q = term.toLowerCase().trim();
        var results = [];
        $http.get('/api/posts/findTags?name='+q).success(function(res){
            for (var i = 0; i < res.length && res.length < 10; i++) {
                results.push({ label: res[i].description, value: res[i].description });
            }
            return results;
        }).error(function(err){
            console.log(err);
        });

        return results;
    }

    function suggest_state_delimited(term) {
        var ix = term.lastIndexOf(','),
            lhs = term.substring(0, ix + 1),
            rhs = term.substring(ix + 1),
            suggestions = suggest_state(rhs);

        suggestions.forEach(function (s) {
            s.value = lhs + s.value;
        });

        return suggestions;
    };

    $scope.ac_option_delimited = {
        suggest: suggest_state_delimited
    };
});'

can you help me how to make it wait until loading data from the http get? it returns always before getting data...

thank you.

How it is possible to show a message inside the results div when there's no result available? @hakib
Thanks for your Great works on this library BTW.

I trying use the component
and give me an error using "on_Select"

I'm doing wrong?

thanks in advance

http://embed.plnkr.co/dPT5zYrpc8pVHOD7SbfL/preview

Hi,

Is there a way to add a clickable button on the suggestion box? I tried to create one but everytime I click on it the box was closing. Really need your help on this one. Thanks!

I am implement this code on my ionic project.
suggestion seem well because went i push down button, it automatically fill the texbox.
but the preview template of list is not showing.
Here is my code

Html

<label mass-autocomplete class="item item-input-inset item-floating-label">                                  
          <span  class="input-label">City</span>                                                                                   
          <input type="text" ng-model="buildcity" mass-autocomplete-item="autocomplete_options" placeholder="City">                                              
</label>

js

var states = [];      

            CityService.getAll().success(function(data) {

                    for(var i=0, len=data.length; i<len; i++){                       
                        states.push(data[i].cityname);                 
                    }
            });
   function suggest_state(term) {
    var q = term.toLowerCase().trim();
    var results = [];

    // Find first 10 states that start with `term`.
    for (var i = 0; i < states.length && results.length < 10; i++) {
      var state = states[i];
      if (state.toLowerCase().indexOf(q) === 0)
        results.push({ label: state, value: state });
    }  
    return results;

  }

  $scope.autocomplete_options = {
    suggest: suggest_state
  };

This is happening when the press is longer the debounce_blur.

The input losses focus which triggers detach. Since the item is pressed the click event does not invoke apply_selection. The apply selection does not regain focus back to the input field so detach considers it as if the input just lost focus and clears everything. When the click is finally invoking apply_selection the item is already detached and the selection is ignored.

This can be possibly be solved by using on-mousedown instead of ng-click but it needs to be tested on touch devices and there might be a usability issue as well.

Haki.

This is my code

        on_select (selected) {
            this.$scope.coach = selected.userId;
        },
        on_detach (selected) {
            this.$scope.coach = selected.userId; 
        }
    }
}

I've run into an odd case where my suggestion options open and freeze that after the field detaches.

Details:

• I'm using the promise option for suggest
• I have multiple auto complete fields in a row on the same form
• It's an edit form so sometimes the inputs already have a full valid value in them

What happens:
If i start one field above the auto completes and tab through each of them:

• tab into autocomplete field1
• field1 attach fires
  • No dialog shows, i don't edit the text or anything.
• tab into autocomplete field2
• field1 detach fires
• field1 suggest function is called and promise resolves
• field1 autocomplete shows all the available options
• field2 attach fires
• tab into autocomplete field3
• field2 detach fires
• field2 suggest function is called and promise resolves
• field2 autocomplete shows all the available options
• field3 attach fires
• tab into non auto complete next field
• field3 detach fires
• field3 suggest function is called and promise resolves
• field3 autocomplete shows all the available options

At that point i can click any where the dialogs stay open. If i click on any of the open suggested options i get a console error TypeError: Cannot read property '0' of undefined from line 203 current_element[0].focus(); probably because the dom is showing but the controller is already detached.

If i tab/focus them again they attach, then once they detach again the dialog closes and the problem doesn't happen again. It seems to only happen on the first pass through.

on_detach doesn't pass me any thing or I can't call anything that I could use to clean up the suggested options right?