darylrowland / angucomplete Goto Github PK

After running my app with angucomplete through a js minifier, it throws this error:

ReferenceError: isNewSearchNeeded is not defined

Tried integrating with ngRoute and kept getting
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.2/$injector/modulerr?p0=sLibrary&p1=Error%3ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.2%2Fangular.min.js%3A17%3A381)

I have no idea why this is caused.
Just adding angucomplete to my modules, cause all errors, removing it will make my app function normally.
var app = angular.module('sLibrary',['ngRoute', 'angularUtils.directives.dirPagination', "angucomplete"]);

any ideas?

When I type the input in the search box, there is no dropdown showing the message "Searching" or "Result not found". Only until I add a space would would the dropdown box appears.

This issue can be easily reproduced on the demo page http://darylrowland.github.io/angucomplete/ on the following mobile browsers:

• chinese input on iPhone Safari
• chinese input on iPhone Chrome
• any input on Android Firefox

I didn't found the usage for jquery dependency in your bower.json. Where did you use?

https://github.com/darylrowland/angucomplete/blob/master/bower.json#L26

Hi.
Is there anyway that I pre-populate the searchStr?

In my app, when user search for something she needs to pick other stuff in the search and press the enter. then page refreshes and load the new data. I need to show the searchStr that user has entered beforehand in the search box.

I can get the search string via a server side language such as PHP or Rails then I tried to set the $scope.searchStr = $_GET['keyword'], I can see when I am debugging with firebug that value had been passed to the value attribute of the field however it doesnt show anything on the search field.

Can you please suggest a solution for it? Thanks.

I want to prevent kicking off a new search if there is a keyPressed, but the search term hasn't changed (think, you're just moving the cursor, or doing a CMD + A to select the text). In preparing to do this, I noticed a $scope.lastFoundWord variable, but don't see it being used anywhere. What's it for? Was it intended for something like this?

Hi I am getting $sceProvider <- $sce <- angucompleteDirective issue while using your module.

Included angucomplete.js in my file and used the angucomplete html code in my HTML. It thros below error. Could you please help resolving it?

Error: Unknown provider: $sceProvider <- $sce <- angucompleteDirective
at Error (native)
at http://localhost:8080/lib/angular/angular.js:2734:42
at Object.getService as get
at http://localhost:8080/lib/angular/angular.js:2739:45
at getService (http://localhost:8080/lib/angular/angular.js:2862:39)
at Object.invoke (http://localhost:8080/lib/angular/angular.js:2880:13)
at http://localhost:8080/lib/angular/angular.js:3718:43
at Array.forEach (native)
at forEach (http://localhost:8080/lib/angular/angular.js:130:11)
at Object. (http://localhost:8080/lib/angular/angular.js:3716:13) angular.js:5754
casualshirts service

i have 2 angucompletes in the same scope. One of them has a minlength of 1 and the other of 3. The 2nd one's minlength keeps overwriting the first one. The way angucomplete is setup now only allows 1 angucomplete per scope.

I have an issue when selecting auto complete result using mouse click into input form. Sometime it work, but mostly it doesn't work. I wonder if there are some problems with the css style or in my directive usage.

Hi

Can you add an option that if only 1 result returned it will auto select it?

Thanks!

It'd be nice to add a simple '1.0.0' tag to the repository to allow gem generation from rails-assets.org. I can't make a pull-request since git tags are not included in them.

Thanks a lot! :)

Wondering if there is a way to clear selection - so on click it would clear the object and text placeholder of the selected item. Thanks!

They Key Events have been removed? The source code in the demo is different from the repo. If you look there is no key events on the template. Can you still use the arrows to cycle through the dropdown results?

hi this is nice plugin . by the way i want to know how to autofocus ?

Steps to reproduce:

1. Type some text in the input box. Results are shown.
2. Click out of the input box
3. Click in the input box again. Results are not shown

after selecting a value from results list, result is placed in html text element. but then it does not move to next element in line.
I am having issue in moving focus to next element when a result has been selected.

Hi,
i'm not sure if it's supported,

but i want to change the autocomplete from "contains" type to "start with" type.
I mean, it will find matches only to the words start with, but not contains as it now.

Any suggestions?

hi.. is it possible for adding any result as tag in an input, so in input there are more than one result from autocomplete ? thanks

i get this error $digest already in progress i dont undestand why as no other $disest cycle is running & as soon as results are displayed they disappear

hi
i use angucomplete and i have problem
when i click on input , browser suggested me previews searches ...
these two items (browser item and drop-down item) have conflict...
i add this property autocomplete="off" to input in angucomplete.js and the problem was resolved.

I need to get the remoteurl for the object request from the $scope, it is possible?

i am not able to create multiple auto completes in the same scope.

example:

        <angucomplete id="ex1"
                      placeholder="test1"
                      pause="100"
                      selectedobject="selectArea"
                      localdata="countries"
                      searchfields="name"
                      titlefield="name"
                      minlength="1"
                      inputclass="form-control form-control-small"/>
        <angucomplete id="ex2"
                      placeholder="test2"
                      pause="100"
                      selectedobject="selectedLocation"
                      localdata="countriesa"
                      searchfields="name"
                      titlefield="name"
                      minlength="1"
                      inputclass="form-control form-control-small"/>

only loads the first one.

Is it possible to set the input textbox value. Example... you load a view with data from a service call that populates the view on initial page load and you need to set the value of the lookup textbox initially.

Is this already possible. If so, how?

When typing, and navigating through results with down arrow key, then pressing tab, the selected item does not get selected. Is this the expected behavior? Tab should be a key that selects the value and moves to next field....

I'm Dynamically adding rows to a table by pushing values into an object array and i need to populate an input on the row with the value of the autocomplete. the selectedObject isn't working correctly unless i am doing something wrong

Please bump version to download with bower.

Hi
I have angucomplete input field : Name
which contains a list of names.
How can I fill the input field from the controller itself.

I found your autocomplete via ngModules its pretty sweet! & easy to use..

But my question is, what was the reasoning behind using eval when you can just use bracket notation instead and achieve the same results instead of sprinkling eval around?

Thanks
-David

Hi,
I noticed that selectedObjects is only updated when you actualy select something from the list but it doesn't update when just type your text and click submit.
Did I miss something or it is meant to be like that ?

If the autocomplete brings a lot of data, when it creates it some bug happens:

1 - if you try to scroll clicking at the scroll and drag it it doesnt work. As soon as i click in the scroll bar, the div with the data desappears

2 - If you try so use the keyboard arrows to scroll down the data, the scroll bar is not following the arrows. I mean, if you press arrows down key, the selection goes down but not the scroll bar.

Admit, I'm new to AngularJS and not sure how to do a lot of things yet but I would like to extend the actions of selectResult to fetch (callback) data and expose a group of edit controls.

Without copying the entire source of angucomplete.js into my app.js and then modifying as needed, is there an easy way to subclass or overwrite just the selectResult function without changing the original source?

Thanks in advance for any guidance...

can i get typed text in angucomplete input from my controller when any object is not exist and is not returned ? something like "ng-model"?

Hi, first of all kudos for such directive, it's been useful :) Keep up the good work.

I have noticed it's not possible to access JSON nested properties from the response, which I would find really useful. For instance:

<angucomplete id="some-search" placeholder="Search" pause="400" selectedObject="selectedService" localdata="data" minlength="1" searchfields="service.name" titlefield="service.name" inputclass="form-control col-lg-4"/>

where data looks like:

[
  {
    "service": {
      "name": "A"
    },
    "otherStuff": {}
  },
  {
    "service": {
      "name": "B"
    },
    "otherStuff": {}
  }
]

Does it seem reasonable?

Hi,

Why not include the angucomplete.css reference in bower.json? I have to change this file manually to grunt wiredep task includes the css in the index.html.

"main": [
 "./angucomplete.js",
 "./angucomplete.css"
],

instead of

 "main": "./angucomplete.js",

Cheers

Any plan to add licence and minified version?

Can I use something like that:
<angucomplete id="categories"
(ex:rock,indie,pop) No space allowed."
pause="400"
selectedobject="categories"
url="api/posts/findTags?name="
titlefield="description"
inputclass="form-control form-control-small"/>

insted of passing http://localhost:3000/api/posts/findTags?name=

thanks

I was wondering how I could set the ng-model of the input-field at my own. I thought the selectedObject would be do that thing but then I saw that the ng-model was hard coded ("searchString"). Is there a possibility to change that or am I doing something wrong?

1. Open the demo page.
2. Set focus to one of those input field.
3. Hit Down Arrow or Enter throws "Uncaught TypeError: Cannot read property 'length' of undefined"

I'll be making a fix pull request after you merge my previous pull request. Sorry I should have requested my pull request with a branch, not on my master, so that I can create a separate pull request for this.

I unzipped angucomplete and moved all of the files into a sandbox directory to 'play around' with it in hopes of eventually integrating it into a single page application. Unfortunately, I get the error listed in the title: SyntaxError: expected expression, got '.'

I haven't tweaked anything in the code. Is there some configuration that needs to happen in order for the index.html in the example directory to work without this error?

The full error is listed below.

SyntaxError: expected expression, got '.'
angucomplete.js (line 1)
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=app&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fmodulerr%3Fp0%3Dangucomplete%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.9%252F%2524injector%252Fnomod%253Fp0%253Dangucomplete%250AF%252F%253C%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A6%253A449%250AVc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A20%253A268%250AVc%252Fb.module%253C%252F%253C%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A20%253A1%250Ae%252F%253C%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A29%253A183%250Aq%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A7%253A276%250Ae%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A29%253A123%250Ae%252F%253C%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A29%253A200%250Aq%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A7%253A276%250Ae%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A29%253A123%250A%2524b%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A32%253A240%250AZb%252Fc%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A17%253A439%250AZb%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A18%253A148%250ATc%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A17%253A223%250A%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A201%253A125%250Aa%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A131%253A118%250AZc%252Fc%252F%253C%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A27%253A214%250Aq%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A7%253A382%250AZc%252Fc%2540file%253A%252F%252F%252FC%253A%252Fapache2%252Fhtdocs%252Faqm2%252Fapps%252Fwo%252F_sandbox%252Fangucomplete%252Fexample%252Fjs%252Fangular.min.js%253A27%253A198%250A%0AF%2F%3C%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A6%3A449%0Ae%2F%3C%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A30%3A9%0Aq%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A7%3A276%0Ae%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A29%3A123%0Ae%2F%3C%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A29%3A200%0Aq%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A7%3A276%0Ae%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A29%3A123%0A%24b%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A32%3A240%0AZb%2Fc%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A17%3A439%0AZb%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A18%3A148%0ATc%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A17%3A223%0A%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A201%3A125%0Aa%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A131%3A118%0AZc%2Fc%2F%3C%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A27%3A214%0Aq%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A7%3A382%0AZc%2Fc%40file%3A%2F%2F%2FC%3A%2Fapache2%2Fhtdocs%2Faqm2%2Fapps%2Fwo%2F_sandbox%2Fangucomplete%2Fexample%2Fjs%2Fangular.min.js%3A27%3A198%0A

I have implemented angucomplete however I can't seam to build the links to profiles like I need too.

When testing this code i noticed you created a inner input element, with its own model then push the result into selectedObject when your ready.

This works, but means, for example if i wanted to clear the value shown, i would need to understand your naming convention (_value) and then tightly couple my code to this implementation.

Would you consider a patch that refactored so the original model is used, instead of a wrapper model?

Mouse click is not trigger the selection like hitting the enter does.

Does anyone have a solution so far, ng-blur fix didn't fix this issue.

This seems like better remote usage in the case that someone returns an array of JSON

                            if($scope.dataField) {
                                $scope.processResults(responseData[$scope.dataField], str);
                            } else {
                                $scope.processResults(responseData, str);
                            }

I ran into a problem with google chrome autocomplete which would cover the first (and only in this case) search result. To get around it I modified the template block in angucomplete.js and added autocomplete="off" to get around the default browser behaviour.

Hi,

if i have an edit form, how do you set selectedObject manually when the screen loads?

on selecting the suggestion from down key and pressing enter the selected value is not populating in input box, however everything is working fine in chrome and Firefox

Hello!
thanks for this directive.

I want to use the remote version of the directive. But, i can't put function directly in remote-url and remote-url-data-field attributes because in backend, i have rest service that attending a jwt token and two or more paramaters.
The service method is like that :

getByFullname: function(fullname){
AuthHttp.get('/rest/' + ProfileService.getCurrentUser().id + '/persons/fullname/' + fullname).success(function (data) {
// the promise gets resolved with the data from HTTP
deferred.resolve(data);
});
// return the promise
return deferred.promise;
}

and in my controller, i have a function wich call the service method.

$scope.search = function(){
if($scope.searchedPerson && $scope.searchedPerson.length > 1){
var data = PersonsService.getByFullname($scope.searchedPerson);
data.then(function(data){
$scope.persons = data.persons;
});
}
};

How can i use the remote caller attribute with a function ?
It can be like ng-change function...

Thanks a lot.

https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L7
https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L32
https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L53
https://github.com/darylrowland/angucomplete/blob/master/angucomplete.css#L46

I've been working on a project that using this component.. greate directive ! by the way is there a way to set a custom message if there are no record inside the array field on this component ?

for example if I search a non existing record, usually there will be a message that says "No results found" instead of that message, could I set it like "No records found" ? is there a way to achieve that ?

Back when this module was not being actively developed/maintained, we ended up writing our own version. Its used by us in prod, but taken ages to get the approval to release it.

https://github.com/voidberg/ngcompletr

Its a very similar idea, but a different implementation.

As angucomplete is now more active, so its likely this won't be of interest to many people - but felt we wanted to share anyway!