vickramravichandran/angular-auto-complete

AngularJS auto complete plugin

angular-auto-complete's Issues

Memory leaks

We noticed a memory leak in our project because of this directive..
After some research we noticed that you did not unbind events on destroy..

Made a fork which solves the memory leak on 1.4.2..

Rendering item doesn't show in IE11

Rendering item doesn't render in IE11, I am using following chunk of code:

renderItem: function (item) {
                return {
                    value: item.Name,
                    label: "<p class='auto-complete' ng-bind-html='entry.item.Name'></p>"
                };
            }

It seems that following html code <p class='auto-complete' ng-bind-html='entry.item.Name'></p> shows in all other browser except internet explorer 11.

[Note: When selecting from blank list the item is showing on selected item but not showing item name in the drop down auto suggestion list.]

What could be the reason? Any suggestion?

Error during installation

Hi there!
First of all, I would like you to know that you have developed a great lib, thank you!

But I have some problem with it. During npm install script it throws an error

node - v8.1.2
npm - 5.0.3
npm ERR! path /angular/node_modules/angular-auto-complete
npm ERR! code EISGIT
npm ERR! git /angular/node_modules/angular-auto-complete: Appears to be a git repo or submodule.
npm ERR! git /angular/node_modules/angular-auto-complete
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
npm ERR! A complete log of this run can be found in:
npm ERR! /.npm/_logs/2017-12-05T11_31_01_062Z-debug.log

I am using last version of your lib and tried some versions before.

I found the same issue in another library, and it seems to be library issue, could you clarify please?
shama/napa#53

Thank you!

Error when there is empty result array

Hi there!

Got another issue for you since last version.

Im using 1.5.4 version.

There is an error where there are no options to show ( result array in data option is empty )

I have next options:

    let metricTemplates = [];
    MetricModel.getTemplates().$promise.then(r => metricTemplates.push(...r.result));
    $ctrl.autocompleteOptions = {
      minimumChars: 1,
      itemTemplate: '<div> {{item.name}} </div>',
      itemSelected: item => _.assignIn($ctrl.form, item.item),
      data: term => metricTemplates.filter(template => false)
    };

and it throws

dll.vendor.js:111888 TypeError: Cannot read property 'then' of undefined
    at successCallback (dll.vendor.js:43757)
    at processQueue (dll.vendor.js:114385)
    at dll.vendor.js:114401
    at Scope.$eval (dll.vendor.js:115683)
    at Scope.$digest (dll.vendor.js:115497)
    at Scope.$apply (dll.vendor.js:115791)
    at dll.vendor.js:117639
    at completeOutstandingRequest (dll.vendor.js:103734)
    at dll.vendor.js:104013

pointing to next function (renderListFn):

function _queryInternal(params, renderListFn) {
	            // backup original search term in case we need to restore if user hits ESCAPE
	            originalSearchText = params.searchText;
	            dataLoadInProgress = true;

	            _safeCallback(that.options.loading);

	            return $q.when(that.options.data(params.searchText, params.paging),
	                function successCallback(result) {
	                    // verify the queryId since there might be some lag in getting data from a remote web service.
	                    if (params.queryId !== queryCounter) {
	                        return;
	                    }
>>>>>>>>>>>>>>>>>>>>> renderListFn(result).then(that.show);

	                    // callback
	                    _safeCallback(that.options.loadingComplete);
	                },
	                function errorCallback(error) {
	                    that.hide();

	                    _safeCallback(that.options.loadingComplete, { error: error });
	                }).then(function () {
	                    dataLoadInProgress = false;
	                });
	        }

keyword search method

Hi
angular-auto-complete module is awesome

i want to talk about keyword search method

you used startWith function to find target keyword

but it isn't enough to search something

i recommend you using includes function

have a nice day

============ code =============

vm.autoCompleteOptions = {
minimumChars: 2,
dropdownWidth: '400px',
containerCssClass: 'color-codes',
selectedTextAttr: 'name',
data: function (searchText) {
searchText = searchText.toUpperCase();
return _.filter(data, function (data) {
return data.name.includes(searchText);
});
},
itemSelected: function (item) {

      }

};

Dropdown dont close on unfocus

Hi Vickram, first of all, nice work, keep going :)
Soooo, my issue is in IE11, the dropdown doesnt close at first attempt, i have to click twice outside to close the dropdown;
Chrome, FF, Safari all fine.

Thx and nice work.

How can i use event argument in data func

Hi
I want to use e argument in data function like itemSelected. Is it possible?

itemSelected: function (e, callBack) {

                var index = $($(this)[0]).data("index"); 

            },

Please provide access to ng-repeat current object access.

In my scenario I keep the auto-complete input in ng-repeat after selecting from the list i want to include other properties of the object to ng-repeat specific object.
Example: ng-repeat=" flower in flower"

selectItem=function(e){
/*Here i need to have flower object access so that i will assign other values without affecting original. */
var item =e.item;
flower.name = item.name;
flower.country = item.country;
}
Something like this.

Please mention steps how to make is run.

Cannot read property `autoHideDropdown` of undefined

When using this in a tabbed form, if going away from and back to a tab containing an angular-auto-complete instance, the above error pops up.

TypeError: Cannot read property 'autoHideDropdown' of undefined
    at i.autoHide (dll.vendor.js:1)
    at dll.vendor.js:1
    at Object.b [as forEach] (dll.vendor.js:1)
    at Object.hideAllInactive (dll.vendor.js:1)
    at a (dll.vendor.js:1)
    at dll.vendor.js:1
    at c.$eval (dll.vendor.js:1)
    at c.$digest (dll.vendor.js:1)
    at c.$apply (dll.vendor.js:1)
    at dll.vendor.js:1

Ideally, the lib should provide a hook to delete any and all listeners placed on window object to allow removing them.

I pushed a quickfix on a fork and I'll make a pull-request.

I simply replaced:

if (that.options.autoHideDropdown) {
  ...

with

if (that.options && that.options.autoHideDropdown) {
  ...

Nested http.get calls

I would like to ask if you have tried or this plugin supports nested http.get call within the data: function? if yes, can you provide a sample?
ex.
data: function (searchText) {
1st http.get() queries using the text searched and passed on the 2nd http.get()
2nd http.get() uses the value returned by the 1st http.get() to process a rest query
the result of the 2nd http.get() will be the ones displayed on the dropdown choices.
}

CSS is too specific

CSS is too specific, it's overkill. It is enough to simply use classes. Or even better, use BEM.

Current: bad

div.auto-complete-container ul.auto-complete-results li.auto-complete-item {}

Proposal 1: good - remove over-specific css, simply use classes)

.auto-complete-container .auto-complete-results .auto-complete-item {}

Proposal 2: better - remove nested styles, it has no use here)

.auto-complete-container {}
.auto-complete-results {}
.auto-complete-item {}

Proposal 3: best - use BEM naming convention)

.auto-complete {}
.auto-complete__results {}
.auto-complete__item {}

I'm happy to submit a PR if desired

Please provide The "No Result Match" message when no matches are found in list

Please add a message if no results match for when we search the list.
like the below image

CSS | Dropdown position

TL;DR - dropdown shows at the bottom left of the screen

Hey!
I'm trying to use your library in my project, and I've encountered a CSS problem.
For some reason, the dropdown shows in the bottom left of the screen, rather than where the input field is located.
I'm using the directive inside a component, can that be an issue?

Label on input is not updated on Angular 1.7.8

Hi,

When we use the keyboard to navigate the itens that are listed, the input field is emptied instead of presenting the name of the item selected in the list. This seems to be an issue on Angular 1.7.8 forward (I can't tell by the others). We used the selectedTextAttr: 'name', and return the objects with uuid and name attributes, still no luck. Any ideas?

ctrl.container.has is not a function

I have an error "ctrl.container.has is not a function" line 255 after update 1.3.0 to 1.4.0

Thks

Testing

@vickramravichandran

Is there any vision on unit testing this?

Because I'm using this component in my project and try to unit test some logic in the callback functions.. But I'm stuck so any unit test examples would be awesome :)

Thanks

Demo site is not working, Please include the documentation in readme.md

Bower error

bower install angular-auto-complete
bower EINVRES Request to https://bower.herokuapp.com/packages/angular-auto-complete failed with 502

missing underscore dependency

The package.json or bower.json is missing underscore dependency.

Please mention steps how to make is runable.

Need ti include CSS, JSS, module dependency?

Wont work on iOS Chrome/Safari

Hi
I implemented the plugin but it seems not to work with onscreen keyboard on mobile devices.
Is this known issue? Something not correct with screen keyboard events detection?
Kris

bower and/or npm

After a very long search I found this auto-complete directive to be the best. It works and is nice to work with.
But I'm a little surprised that you can't find it on bower or npm. Can you add it there please? It makes things a lot easier.
Thanks.

Android Back Button Issue

When typing on Android, pressing the back button to dismiss the keyboard also closes the results, making it frustrating to select an item.