guylabs / ion-autocomplete Goto Github PK

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, 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 ?

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

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.

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"
}];

I recommend using collection-repeat instead of ng-repeat for this cases:

http://ionicframework.com/docs/api/directive/collectionRepeat/

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 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?

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;
};

As a result, running grunt wiredep does not inject the CSS to the HTML together with the JS file.

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:

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,

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.

The goal is to add a version table to the documentation which shows the supported versions of Ionic for which ion-autocomplete versions.

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.

When the query is empty, I'd like to display the full set of items.

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

Hi Guy,

A question about the functionality.

Is it possible to modify the result after I have selected a value?

Scenario:

1. empty ion-autocomplete
2. Click on it opens the overlay with the search input, cancel button and result list >> start typing "New Y"
3. Select a item >> select a address "New york avenue, NYC, USA"
4. ion-autocomplete is filled with description value >> New york avenue, NYC, USA

This is all normal behaviour, but now comes the step which the question is about:

5. I want to add a street number to the address, so I click on it, but then step 2 is triggered instead of input keyboard to modify the address. >> desired result: keyboard and modify to "New york avenue 55, NYC, USA "

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,

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?

2. This array has more than 3000 items.How fast will be work autocomplete with this large array?

Problem: Installing ion-autocomplete using ionic add ion-autocomplete results in a duplicate installation of ionic and its dependencies.

Steps to reproduce:

1. Create a new application: ionic start myTestApp.
2. cd ./myTestApp
3. 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)

1. cd ./www (going into www directory to see if we're able to install it there)
2. 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 noticed that the latest stable version doesn't have the items-removed-method

It's safe to use the Master Branch?

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

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

Hello, how do I clear the input value after selecting one item (NOT multiple-select)? Clicking 'Cancel' will only dismiss the modal.

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.

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.

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 :)

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

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)

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,

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

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 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;
}

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

To write custom template it ll be easy if it is in separate file and include it using templateUrl

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

1. Open above link in any browser
2. Click on the text field to open autocomplete modal
3. Start typing "Item" ---> No suggestions show up.
4. Delete text from input box and start typing again... --> it works perfectly now

Please let me know if I am missing something

Thanks in advance

Jas

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.

I want to add array to item to selectedItems manullay, is there any way to do this.

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

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"
}
]

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?

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.

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"/>

Is there a way to "clear" or "reset" the autocomplete control?

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.

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.