guylabs / ion-autocomplete Goto Github PK
View Code? Open in Web Editor NEWThis project forked from etodanik/ion-google-place
A configurable Ionic directive for an autocomplete dropdown
License: MIT License
This project forked from etodanik/ion-google-place
A configurable Ionic directive for an autocomplete dropdown
License: MIT License
To write custom template it ll be easy if it is in separate file and include it using templateUrl
Problem: Installing ion-autocomplete using ionic add ion-autocomplete
results in a duplicate installation of ionic and its dependencies.
Steps to reproduce:
ionic start myTestApp
.cd ./myTestApp
ionic add ion-autocomplete
Note that it fails with the message:
MacBook-Pro:app gjstocker$ ionic add ion-autocomplete
Failed to find the bower component "ion-autocomplete".
Are you sure it exists? (CLI v1.3.20)
cd ./www
(going into www directory to see if we're able to install it there)ionic add ion-autocomplete
.The result of this process is that a duplicate www
folder is created inside of the normal www
folder with a copy installation of ionic and its dependencies.
Expected behavior: Installing the plugin using ionic add ion-autocomplete
from the base app directory should work; and not result in a duplicate install of ionic www
.
I use many Search inputs, in different views.
I didn't found any way in current version to set which modal should be open (if you could add an option to reuse modals to have multiple inputs, it would be awesome, ...maybe wrong).
But when the view containing the input is destroyed, the ion-autocomplete modal is never removed from DOM. After some time using my application, i have plenty of modals in DOM.
Hello,
I'd like to use 2 autocompletes and the second one depends on the first one. If first change its value I need to delete or set up specific value of ng-model on second autocomplete. I didn't find how can I do it.
If I just simply change ng-model variable, it doesn't have effect on autocomplete. It still shows me old value.
Is it possible to fix it somehow?
Thanks!
Jan
The goal is to add a version table to the documentation which shows the supported versions of Ionic for which ion-autocomplete versions.
Luv this directive, but I'm experiencing an issue.
When the items-method needs to return an item list stored in a variable, the autocomplete directive won't show any suggestions first time you start typing. You need to delete the text again from the search box and only when typing (from scratch) the 2nd time items load.
See http://codepen.io/ChrisAelbrecht/pen/waewMr for reproducing the issue.
Same codepen here, but with variable directly in items-method: http://codepen.io/ChrisAelbrecht/pen/rVwBxP
I'm using ionic 1.0.0 uranium-unicorn.
Thx,
Chris
It seems when I click on the input, a different view is popped up. But what if I want to use my own view for displaying the results. I don't seem to find the option to turn it off.
Thanks in advance.
Hi,
I was able to get "usage with the element restriction" working.
However, I cannot get "the attribute and element type directive" working.
This is what I put in my html:
Just wonder if it is a know bug, or am I doing something in correctly.
Thanks for making the plugin, BTW.
Hi,
I'm using your excellent autocomplete directive but for some reaon, I can only select/click on the first item in the result list?
<ion-autocomplete ng-model="parcel.pickup.address" placeholder="Enter your address ..." items-method="geoPlacesLookup(query)" item-view-value-key="description" items-clicked-method="clickedPlace(callback)"/>
I've written a custom Google Places AutocompleteService() which I call using the function geoPlacesLookup(query). This works perfectly but I can only click on the first item in the list.
The rest remains visible but not clickable?
Regards,
Tim
Hi,
I am using the autocomplete but facing some problems when running it in the ios and android emulator. Beforehand I made a mockup running it in the browser and this worked fine, but when copying the code to my actual project I got a error. Could you please help me.. dont have any clue!
The following error I got in the console:
[Error] Error: collection-repeat expected attribute collection-item-height to be a an expression that returns a number (in pixels) or percentage.
this is my code:
HTML
JS
$scope.getTestItems = function (query) {
console.log('regel 76');
var searchItems = [
{id: "1", name: "John", view: "John: "},
{id: "2", name: "Steve", view: "Steve: "},
{id: "3", name: "Richard", view: "Richard: "},
];
var returnValue = { items: [] };
searchItems.forEach(function(item){
console.log('bijna onderaan');
console.log(item);
if (item.name.indexOf(query) > -1 ){
returnValue.items.push(item);
}
else if (item.id.indexOf(query) > -1 ){
returnValue.items.push(item);
}
});
return returnValue;
};
$scope.itemsClicked = function (callback) {
$scope.callbackValueModel = callback;
}
When the searchbox appears I get Uncaught TypeError: Cannot read property '0' of undefined
.
e.touches in onTouchStart seems empty. When debugging I see that they are effectively empty (using Chrome). The event however has originalEvent
that contains the touches. Changing to that makes it work, but I'm not sure if this has any other side effects.
var onTouchStart = function(e) {
scrolling.moved = false;
scrolling.startX = e.originalEvent.touches[0].clientX;
scrolling.startY = e.originalEvent.touches[0].clientY;
};
I noticed that the latest stable version doesn't have the items-removed-method
It's safe to use the Master Branch?
hi,
I have a problem with calling the auto complete page or form on ng-click. how can i call the auto complete in ng-click? any solution here?
Render the view value of the model is not working, this is always rendering an object list, that's because the code inside of ngModel.$render is not being executed.
I just added this line below and solved my problem:
return {
priority: 1,
Hi
first of all thanks for this "plugin".
What i need to understand is how to prepopulate the model that i'm using for the autocomplete,
I get from the server an array of tags, I push it into my model and the tags appear as text inside the input field of the ion autocomplete object.
But when i click on it to find or remove tags, the prepopulated model seems empty, because it doesn't list (as selected) any of the tags that it shows in the input field.
So i found this function ""model-to-item-method" but i cannot make it work. Would you mind showing a full and working example?
Thanks
I'm using a static array to populate the directive using the items-method. However, sometimes, the results list will populate with list items that don't match my query. However, when one of these results is clicked, they will change to a result that does match. See these screenshots:
Here is what my controller looks like:
find = function(key, array) {
var results = [];
for (var i = 0; i < array.length; i++) {
if (array[i].search(new RegExp(key, "i")) != -1) {
results.push(array[i]);
}
}
return results;
}
$scope.featuresList = function(query) {
return find(query, $scope.propertyFieldOptions.exteriorFeatures);
}
And my html:
<ion-autocomplete ng-model="property.exterior_features" items-method="featuresList(query)" multiple-select="true" placeholder="Enter exterior features..." class="text-right"/>
I want to add array to item to selectedItems manullay, is there any way to do this.
Hi
This is weird and probably I must be missing something, but if you can have a look that would be nice
Here is a codepen I did
http://codepen.io/jaschahal/pen/OVppRb
How to reproduce
Please let me know if I am missing something
Thanks in advance
Jas
When the query is empty, I'd like to display the full set of items.
Hi,
I'm looking for a way to show some entries in the list, right after the user clicked on the autocomplete input field.
I want to use it like a filterable select.
Is there an option to activate this behaviour.
Thanks in advance :)
Hi Guy, awesome work so far!
I've noticed that using the Android back button while the autocomplete modal screen is showing does not close the auto complete box, but does navigate back thru the history beneath the modal.
Not sure if I've missed something.
Jarrod
Hi,
When my "items-method" promise is called for the first time, items are not displayed
But the following requests are displayed
I'm sure that my promise is resolved with an array of items during the first call.
I have tried to init the autocomplete with the ng-model but it did not work so I don't really unsderstand what the ng-model is for.
$scope.autosuggested_stars = []
<label class="item item-input">
<ion-autocomplete placeholder="Search by star name" items-method="search_by_name(query)" item-view-value-key="display_name" ng-model="autosuggested_stars" item-value-key="id" items-clicked-method="view_star_from_autosuggest(callback)"/>
</label>
Don't hesitate to ask me more details.
If a user scrolls their view and the touch started upon an autocomplete field the autocomplete modal will show even if field is no longer in view.
This is a duplicate of closed etodanik#2, though I think I've found a workaround. Not sure if you'd want to make this configurable as it may cause unexpected side effects for users who are already expecting this behaviour.
Hey guys im pretty new to angular as well as ionic, so take it easy on me. Your autocomplete component looked like a great fit for what i was trying to do with my personal ionic app, but im a little confused as to why the initial bower install command would completely reformat the layout of my angular and ionic libraries. Also I dont have a /bower_components directory so the second installation step of including those files fail and in turn the third step to include the ion-autocomplete fails. So instead I removed the link to the file inside the bower_components dir. and pointed to where the install had saved it.. boom works. But im still just confused as to why the bower install command removed files like my angular ng-resource and reorganized everything else, all without making a bower_components directory. Should I have installed this component differently?
Attached is a screenshot of all the files that where moved or renamed or deleted:
Please somebody help me with ionic autocomplete.
I have 2 questions :
I have array,it`s look like
array = [
{name:'some name' , id:'01'},
{name:'some name' , id:'02'},
{name:'some name' , id:'03'}]
how i can use ionic autocomplete to search I'm my array?
If I type "1 main" i get results from my json set in the list items of "1 mai"
If I type "1 main s" i get results from my json set in the list items of "1 main"
If I type "1 main" super fast I only get results of "1 M 1 ..." in my list items while my $scope.model console output shows the correct json object containing "1 Main Rd Abbot, ME"
When logging out the scope.model the values are correct for what I'm typing, but the list of suggestions isn't updating to the latest batch. Doing scope.apply() causes the digest in progress error and ng-model-options="{ debounce: 1000 }" doesn't seem to affect the search speed.
It seems that the $scope.model is not updating fast enough on
$http.get(requestUrl) // load model with delay
.success(function(json) {
var jsonObject = {};
jsonObject.addresses = json;
$scope.model = jsonObject;
console.log($scope.model);
});
All of the template items are set correctly as I am getting results in the list that I expect as far as addresses text values showing up(they're just wrong).
Another way of saying it is, if I did 3 searches the list reflects search #2 until I perform search number 4, then it shows 3 and so on. So in searches A B C D. B gives me A. C gives me B. D gives me C.
All the while the scope.model is giving me the correct letter - just not the visual list.
Is there a way to "clear" or "reset" the autocomplete control?
As the title
The backdrop that appears behind the search popup sometimes doesn't hide when i click the done or the cancel button, and it's required to tap the back button of the phone to make it go away
Hi,
I'm using ion-autocomplete with ionic 1.0.1 and I get this error in my console.
But it does not break the directive.
Currently the autocomplete only opens on a click. It should open when receiving focus (eg if tabbing through form fields, or using ios' > "next form element" button)
Would be nice to be able to specify a loading icon/spinner for when the 'items-method' returns a method/promise for a potentially long-running action (ie. hitting a remote API vs local model).
Proposing an extra two configurable options:
<ion-autocomplete
...
loader="true" [default to false for backwards compatibility]
loader-icon="spinner"
/>
See http://ionicframework.com/docs/api/directive/ionSpinner/ for available icons.
Hello,
Just to be sure that it is a wanted behaviour because we have to chack if callback.item is defined in the function given to items-clicked-method.
Regards
Hello, how do I clear the input value after selecting one item (NOT multiple-select)? Clicking 'Cancel' will only dismiss the modal.
I recommend using collection-repeat instead of ng-repeat for this cases:
http://ionicframework.com/docs/api/directive/collectionRepeat/
clicked callback is not reliable if you don't also get a removed message when an item is deleted. Otherwise you are stuck with out of date data.
I have a fork and I will raise a pull request.
As a result, running grunt wiredep
does not inject the CSS to the HTML together with the JS file.
Hi, after i clear model ther is still value in input.
Example:
<ion-autocomplete
ng-model="data.auto.registrationPlace"
items-method="registrationPlaceQuery(query)"
placeholder=""
cancel-label="back"
item-view-value-key="nameFull"
name="registrationPlace"
required/>
How can i clear the inpur field when programmatically clear model ?
Hi Guy,
I tried but ion-autocomplete does not seem to take the ng-if parameter.
Could this be a feature or is there a easier way to use ng-if, currently i'm putting the ng-if in a wrapper around the ion-autocomplete directive.
Regards,
Tim
Hi,
I'm getting this error when using ion-autocomplete with jQuery: Uncaught TypeError: Cannot read property '0' of undefined
This line causes it: 6105027#diff-a7a7d5212fe737f747c11308b339d7acR194
when jQuery is loaded, touch event is different, e.touches is undefined
calling remote data seems to be not working.
$scope.callbackMethod = function (query) {
return $http.get(endpoint);
}
on the server side, I can see that the request is hitting the server, but not completing.
Let me know if I'm missing something.
Hi,
I´m starting to use the component, but I think it misses the hability to build the query based upon some key, besides the text itself.
I´m not sure, if there´s any suggested workaround though, please let me know.
I´ll try to explain it:
Suppose, for instance, that I have one screen with 2+ components, and that for each of them the query should be created differently.
The screen is also generated dinamically, on a ng-repeat, based upon a JSON structure, so I can´t really declare the html on 2 different ways (calling 2 different functions).
Instead, I´d rather have something like that (just a suggestion)
Ideally this second attribute should be optional, so that there´s no API incompatibility.
We could also make it a single queryParameter attribute:
queryParameter:
{
query:'xxx'
id: '123'
}
But I sense this would be undesirable for most cases
So that, both the query string and a identifier of the component are passed to the callback function. This way, I would have means of knowing how to build the proper query.
A "this" reference to the element could also solve it, but it feels a little overkill for the task.
Is there any workaround for it?
Thanks
I have been trying to get this plugin to work but without help. I was able to set it up and make an api call and the form seems to work. but does not return the values as displayed in the demo. but my log shows me that something is going on.
here is my set up code
<ion-autocomplete
ng-model="trade.game_id"
items-method="callbackMethod(query)"
placeholder="Find a game"
cancel-label="back"
item-value-key="title"
item-view-value-key = "title"
name="title"
required/>
and my callback is below
$scope.callbackMethod = function (query) {
GameService.search_games({s: query},
function success(data){
console.log(data);
return data
})
}
My game service is
.factory('GameService', function ($resource) {
return $resource("http://localhost:3000/api/v1/:action", {}, {
search_games: { method:"GET", params: {action:"search_games.json"}, isArray: true }
});
})
What am i doing wrong.
Here is my json
[
{
id: 1,
title: " Bloodborne",
cover: "/system/games/covers/000/000/001/original/bloodborne.jpeg?1431248223",
image: "http://localhost:3000/system/games/covers/000/000/001/original/bloodborne.jpeg?1431248223"
},
{
id: 5,
title: "Mortal Kombat X ",
cover: "/system/games/covers/000/000/005/original/mortal_konbatx.jpg?1431443737",
image: "http://localhost:3000/system/games/covers/000/000/005/original/mortal_konbatx.jpg?1431443737"
},
{
id: 7,
title: "Borderlands: The Handsome Collection ",
cover: "/system/games/covers/000/000/007/original/BORDER.jpg?1431445199",
image: "http://localhost:3000/system/games/covers/000/000/007/original/BORDER.jpg?1431445199"
}
]
For example, I have created a custom template that I want to reuse in a couple of contexts, but it will have a different title in each place. It would be great if I could pass in something that would then be available for the template to display.
Thanks for this nice autocomplete control for ionic.
Are there ways to use those classes (ng-pristine, ng-dirty, etc...) to do some validation with this control?
Creating a post with the my new tagging input works fine but when passing in a pre-populated $scope.model, like when updating a post, the tag input shows the comma-separated tag correctly. However when you click to add more tags, the pre-set tags do not appear in the "selected items" modal list. I'm using sample hard-coded data to make sure the data is consistent but still getting same result. using latest build
UPDATE I noticed that after selecting tags, the tag object from component has an added $$hashKey parameter that I am not saving or passing back in. could this be the reason the component is not picking up my preset tags
// works fine when creating posts
$scope.post.tags = [];
// after tags are selected using the matches from callbackMethod(query),
// the new model looks like this now. perfect! This gets saved to mongo via api and
// the new tags in the 'selected items' modal list show correctly too
$scope.post.tags = [{
//$$hashKey: "123", im not saving this though??
id: "126",
name: "seagate 40726",
user_id: "1"
},{
//$$hashKey: "124", im not saving this though??
id: "125",
name: "seagate a78",
user_id: "2"
}];
// when updating the post, passing back in the same data without $$hashKey
// does not display the tags in the 'selected items' modal list, but IT DOES show the
// csv value in the directive form input correctly
$scope.post.tags = [{
id: "126",
name: "seagate 40726",
user_id: "1"
},{
id: "125",
name: "seagate a78",
user_id: "2"
}];
HI,
When using the multi select , when I set the ng-model to an already filled array, we see these items comma separated in the input field, but when I search to add new items this list is not displayed. is that a missing feature, a bug, or I am missing something?
Hi Guy,
A question about the functionality.
Is it possible to modify the result after I have selected a value?
Scenario:
This is all normal behaviour, but now comes the step which the question is about:
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.