wpalahnuk / ngautocomplete Goto Github PK
View Code? Open in Web Editor NEWSimple AngulasJS directive for adding google places autocomplete to a textbox element
Simple AngulasJS directive for adding google places autocomplete to a textbox element
Hi,
when google places return a name with ' inside, the details scope won't update and the model value is wrong?
Hi! A stupid question here: how can I turn the dropdown into a dropup? Ideas?
ngAutocomplete sounds too generic name, as it implements only places autocompletion. I would say it should be renamed to ngAutocompletePlaces. But perhaps it is too late.
I am running into issues when you are using the autocomplete with a bootrap modal. This is more of the z-index styling for the dropdown menu of the autocomplete. As seen from the image below, you can see that with Bootstrap modal, the dropdown is behind it and selecting any values is not possible.
What would be the best way in modifying the code to adjust for this?
When the watchEnter
option is set to true
, getPlace
is used to get the location. However the types
parameter is not included in the request and will therefore not return the same results as the autocomplete list.
In my example this resulted in street addresses being included in the result (I had defined types: '(cities)'
in my options).
It can be fixed by adding the types
parameter to the request as follows (around line 124 in ngAutocomplete):
autocompleteService.getPlacePredictions(
{
input: result.name,
offset: result.name.length,
types: opts.types
},
This should have an option to use a submit button which would do exactly the same as pressing enter.
If there's a way to simulate enter key, please let me know!
Tooltip and ngAutocomplete cannot be used together. It would be very handy if you could.
I've made a plunker to illustrate: http://plnkr.co/edit/LW4bJ1aD2iZF4IAsAFFT?p=preview
Uncomment the last div to illustrate the breakage. Here's what you get...
Error: [$compile:multidir] Multiple directives [ngAutocomplete, tooltip] asking for new/isolated scope on: <input type="text" name="withBoth" ng-autocomplete="" ng-model="withBoth" tooltip="This field is required" tooltip-trigger="{{{true:'blur',false:'never'}[myForm.withBoth.$error.required]}}" class="form-control" id="textToAddress" placeholder="Ship To" required="">
Hi,
I have a issue,
console.log($scope.details3); // undifined
$scope.gc.latitude = $scope.details3.geometry.location.lat();
//TypeError: Cannot read property 'geometry' of undefined
So that when bower install
ing, you don't end up with version *
.
What if i want to how pre-binded scope in ngautocomplete?
Hi,
I am not sure whether I am doing this right. But I get an error saying that the details variable for workDetails is undefined
In HTML,
I have Home Location input box with ng-autocomplete ng-model="homeAddress" details="homeDetails" and Work Location input box with ng-autocomplete ng-model="workAddress" details="workDetails"
JavaScript
$scope.$watch('[workAddress, homeAddress]', function(newValue, oldValue) {
if(newValue[1] && newValue[0]) {
console.log($scope.workDetails.geometry.location.lat());
}
}, true);
I get 'Error: $scope.workDetails.geometry is undefined' in my console as soon as I enter values for my work location
Same thing happens for homeDetails if Home Location is placed after Work Location.
What am I doing wrong?
Hi everyone!
I'm trying to introduce this module into an hybrid app and I was wondering if I could turn the autocomplete dropdown into a dropup. Is it possible?
Thank you in advance for you help! :)
I love the module - thanks.
I'm using it in a form to collect lots of information. There are many ways to select one of the addresses, but when the user presses the Enter key to select the address the form submits. This results in validation errors for the remaining forms.
Is there an option so that using the Enter key to select the location will not bubble up to the submitting the form?
How are you going to have errors in the "Simple Usage" examples Plunkr...
Hi,
thanks for your great angular integration. I would like to tell you and other people (maybe you should put this into your documentation) that the scope-var details will provide lat and long inside of "geometry" ($scope.details.geometry.location)
You can get latitude trough key "j" and longitude on key "C". This vars seems to change from time to time to J and K, which lead into bugs. After reading some documentation, I've figured out the bulletproof method for getting the lat and lng.
$scope.details.geometry.location.lat()
$scope.details.geometry.location.lng()
I'm sure that unexperienced users will make the same mistake and try to access the keys directly, which is a bad idea. It would be great if you could mention the methods above to prevent errors.
Is there a method included that allows me to get the LatLng coordinates from the autocomplete address?
I am trying to get only addresses and from google docs i need to give the type of 'address', and i still get countries in the list.
this.placeOptions = {
types: ['address']
}
<input type="text" placeholder="Where do you live?"
ng-autocomplete="placesResult" details="profile.user.location.placesDetails"
options="profile.placesOptions"
name="location"
ng-model="profile.user.location.name" class="mt" required/>
i wanted to know how i can use details values in controller to get only lat,lng
Thanks .
Is it possible to force language google-places should use to return addresses?
I mean: I need all street addresses to be formatted in the same language (for example, "Street ABC, Italy", and not "Strada ABC, Italia"), indipendently by client's browser language...
I see in ngAutocomplete there is a "country" option, but I am not sure I understand it's meaning; but for sure it doesn't fulfill my need... :-(
I think after selecting a location the element value should be equal to formatted_address value.
e.g For the location term cali
the field value is set to "Cali - Valle del Cauca Department, Colombia"
but it should be "Cali, Cali, Valle del Cauca, Colombia"
Your chosen name for this project - "ngAutocomplete" - will lead most developers to believe (before reading further) that you've implemented a generic autocomplete service for use as an Angular directive.
But you haven't. You've made an autocomplete just for google places. It's very good, but would it not be better named "ngGooglePlacesAutoComplete" or similar?
I am trying to input a dynamic value to the options parameter but it does not seem to be evaluating. What would be the best way to do this? I have an ng-repeat form that I will not be able to have a scoped variable for each ngAutocomplete input. An example:
http://plnkr.co/edit/41hfxvlZABIGeGAikfi2?p=preview
As you can see I have two ngAutocomplete inputs both have the country as a dynamic option but neither work. Is there a way to do this?
One thing I have tried was changing options: "=?" to options: "@?" in the directive which seems to allow {{country}} but it still does not limit the countries correctly.
I would type some characters into the autocomplete text field such as 'ap', then I would use my arrow keys to navigate to one of the autocompleted options. Then, I would hit enter which would submit the form. However, when I press enter, the ng-model still only had a value of 'ap' instead of 'appliance store' (or whatever starts with 'ap').
So, in order to solve that, I added the following code at line 83 of your directive. I think that a lot of people would be looking for a fix like this.
// Custom code to make autocomplete field pass autocomplete value to the model when enter is pressed
element.bind("keydown keypress", function(event) {
if(event.which === 13) {
scope.$apply(function () {
controller.$setViewValue(element.val());
});
}
});
// end of custom code
I got this kind of error message when using this plugin
Error: [$compile:nonassign] http://errors.angularjs.org/1.2.23/$compile/nonassign?p0=&p1=ngAutocomplete at Error (native) at http://localhost:8888/erealestate-web/libs/angular/angular.min.js:6:450 at $get.n (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:53:166) at Object.<anonymous> (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:53:258) at k.$get.k.$digest (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:109:268) at k.$get.k.$apply (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:112:398) at h (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:72:454) at v (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:77:463) at XMLHttpRequest.w.onreadystatechange (http://localhost:8888/erealestate-web/libs/angular/angular.min.js:79:24)angular.min.js:92 (anonymous function)angular.min.js:68 $getangular.min.js:110 $get.k.$digestangular.min.js:112 $get.k.$applyangular.min.js:72 hangular.min.js:77 vangular.min.js:79 w.onreadystatechange
after i find an address on autocomplete input, i set the value in some input tags, it works fine, but if i set an ng-model on this inputs, all brokes, the inputs stay blank after the autocomplete search
I transform the data that comes back from the places service. Could be done in this directive or could be done in my code. Not sure... feel free to close if you don't think this is beneficial.
To keep track of the changes to the Places search in the input box, I am using $watch on the ng-model. In the $watch function, I am assigning the longitude and latitude as:
$scope.map.center.latitude = $scope.mapdetails.geometry['k'];
$scope.map.center.longitude = $scope.mapdetails.geometry['A'];
If I do not check on the validity of mapdetails, I get a 'undefined' error. But I realized that even if I select an item from the autocomplete list, I still see that 'mapdetails' is returned as empty. So, I am never able to retrieve the results in the $watch function.
What would be the proper way to act after an item is selected from the dropdown autocomplete list? I have tried using ng-change too, but the same result
I have a city search with ng-autocomplete. When i want to edit my details it resets the city value on the scope to an empty string instead of taking the existing value.
any thoughts?
Can please you tag a release and add to this library to Bower?
Thanks for this library. Is it possible to support 'lodging' as a place type by itself?
When I set the types parameter to 'lodging', it does not work. Only accepts four strings: 'geocode', 'establishment', '(regions)', or '(cities)'.
Any reason why this module is not a published npm package?
In the Readme.md placed at http://ngmodules.org/modules/ngAutocomplete, the module to inject is named as 'ng-Autocomplete', when it should be 'ngAutocomplete'.
In some cases you'd want to only display the autocomplete input without binding a scope variable to it.
I am using this directive happily in a number of places in my app (thank you!), but when I try to use it in a modal, the google results are not shown.
My autocomplete input field is in a form, when i hit enter(to select the city in autocomplete) the form is submitted and the value in the input field is not updated to the result value i wanted to select.
The value of detailsResult.formatted_address
is not ok for my application, what I want to have is only street name (not country + city, as google thinks).
I'm trying to find workaround for that. So far have two options:
$watch
the details object and once it's changed, read address_components
, format it and then re-initialize model with that.ngAutocomple
with format
attribute, with function that takes details
and returns formatted value.I will start with first one (quick and dirty), but would be happy to have your opinion on second option, if you are fine with that, I'll pack a PR.
Is this MIT or other?
Need to know if the element is valid or not for form controls.
I am making an app using your amazing directive. Unfortunetly, it does not click properly when I integrate it with my app. I am using the ionic framework. Here is a sample(use on your phone) . http://shielded-hamlet-4180.herokuapp.com . Please let me know if you plan to support mobile.
I would like to display only countries in the dropdown, but I can't find the option in the parameter.
How can i do that?
I also can't find the code place to filter the result.
When adding ngAutocomplete to a controller I keep getting this error:
Unknown provider: ngAutocompleteProvider <- ngAutocomplete
Does anyone know how to call a function in the controller with details passed as parameter when an option from the autocomplete dropdown is selected?
Thanks
I was testing the plunker simple example and I found when I typed 'ssdfssd' or another value out of the allowed values, the value was stored in scope anyway and I didn't need it. So, I fixed this validating 'geometry' position:
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
if (!scope.details.geometry) {
scope.ngAutocomplete = '';
}
else
scope.ngAutocomplete = element.val();
//scope.ngAutocomplete = JSON.stringify(scope.details);
});
})
is it a good way to fix it or what do you suggest instead of it?
Thanks in advance and excuses for my bad english :)
I am writing Unit test for this directive. I am really confused how to fire place_changed event, and then get the details param from this directive. Can some one guide me?
I want to get the lat and lng in the result, I dont want to use details as i know about that option.
If you make the ngModel point to whatever object you shove into it (ie: the object that you are currently shoving into the details attribute), then it will simplify quite a bit of your code. I struggled with your code for a few hours until I realized this. Just thought I'd point it out.
<input ng-model="foo.name" />
scope.foo = name: 'blah'
Then you never have to deal with maintaining both the ngModel and a details attribute.
I'm adding the map asynchronously, therefore I have the google is not defined error.
Can you do it with javascript promises ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.