ghiden/angucomplete-alt

Autocomplete Directive for AngularJS. A fork of Daryl Rowland's angucomplete (https://github.com/darylrowland/angucomplete) with some extra features.

angucomplete-alt's Issues

Add scrollbar when suggestions become very long

Currently it shows all, but it becomes quite difficult to use when it goes over more than 10.
Possibly have an option of showing scrollbar or not.

selectedObject is not reset after input is changed

Once selectedObject is set, and then if user changes input field, selectedObject still remains the previously selectedObject.
It should reset selectedObject when input changes.

Angucomplete-alt Erases Nearby HTML Elements

I have an issue with HTML elements that are placed in the same div it erases all html elements.

If I have the following code:

          <div>
                 <angucomplete-alt id="members"
                    place-holder="Выбирете Поставщика"
                    pause="300"
                    selected-object="setSupplier"
                    local-data="allSuppliers"
                    title-field="name"
                    minlength="2"
                    search-fields="name,notes"
                    description-field="notes"/>
                <input class="new-todo" placeholder="Supplier Name" ng-model="group.supplierId">
                <input class="new-todo" placeholder="External Id" ng-model="group.externalId">
                <textarea class="new-todo" placeholder="Notes" ng-model="group.notes"></textarea>
                <button ng-click="addGroup(group)">Add Group</button>
            </div>

it looks like this:

But if I wrap in the div:

          <div>
                 <div>
                 <angucomplete-alt id="members"
                    place-holder="Выбирете Поставщика"
                    pause="300"
                    selected-object="setSupplier"
                    local-data="allSuppliers"
                    title-field="name"
                    minlength="2"
                    search-fields="name,notes"
                    description-field="notes"/>
                </div>
                <input class="new-todo" placeholder="Supplier Name" ng-model="group.supplierId">
                <input class="new-todo" placeholder="External Id" ng-model="group.externalId">
                <textarea class="new-todo" placeholder="Notes" ng-model="group.notes"></textarea>
                <button ng-click="addGroup(group)">Add Group</button>
            </div>

it display everything although on the different line:

PS thanks for this awesome angular library. It's pretty functional for me.

MongoDB Objects

Hello there,

First I'm gonna tell you exactly what I'm doing.

First I'm loading my data from mongo I create a json from it to load at my angular back.
mediasData.medias = medias,
mediasData.activePage = page,
mediasData.totalPages = totalPages,
mediasData.last_sync = strftime('%F %T', systemSettings.last_sync)
res.json(mediasData)
Then I define my controller and create a $scope for my medias.

var app = angular.module('app', ["angucomplete-alt"]);

app.controller('mediasCtrl', function($scope, $http){
$scope.medias = []
$scope.activePage = ''
$scope.totalPages = ''
$scope.last_sync = ''

$http.get('Mymedias').success(function(mediasData){
  $scope.medias = mediasData.medias
  $scope.activePage = mediasData.activePage
  $scope.totalPages = mediasData.totalPages
  $scope.last_sync = mediasData.last_sync

})

})

I can do a (ng-repeat) or whatever calling media in medias without a problem, but I setup angucomplete but I can't find to make it work.
Here's my front input

Any ideas what I could be doing wrong?

Appreciate it and thank you for your effort, your tool is really impressive!

JSONP support

Someone asked me about JSONP support.

ng-clicked not firing

Hi,
I noticed that in most of the examples (http://ghiden.github.io/angucomplete-alt/) and also in my project, where I try to include angucomplete-alt, ng-click is not firing (dialog disappears but selectResult does not get called). It only works with the People example and I really don't understand why.

down arrow throws an error when nothing has been entered

Just pressing down arrow throws an error when nothing has been entered into text field.

How to clear data field when user deletes selected value

I have an auto complete text box set up. (using angucomplete-alt)

If the user selects a value everything works fine.

But if a user selects a value, and then deletes it, the data model retains the selected value.

I have tried ng-change and ng-blur but neither work.

I don't want to clear the field after the selection is made so how do I capture it when the user clears the selected item?

Thanks

Predefined selectedObject

Hi, I'd like to know if it's possible to have the selectedObject predefined. For instance, when an object is loaded from a remote server. I've tried:

• setting override-suggestions="true";
• retaining the format of {"title":.., "description":..,"image":.., "originalObject":... } on the server side.

Scrollbar Bug

I found a bug in scroll bar.
In the example-1, when the example page's scroll is top, autocomplete's scroll bar works

but when the example page's scroll is not top like below image and autocomplete's scroll bar is moved, sometimes the autocomplete list is disappear.

slectedObject - Too much output

Consider this as more of a question than a bug.

I'm using angucomplete-alt to talk to my API , it works perfectly, seriously the best autocomplete for angular and I've tried them all.

Anyway my API returns JSON of cities basically looks like so:

{ cities:[ {city:'Haifa',code:1339}, {city:'Tel-Aviv', code:1338} ] }

And I can see it populate accordingly, pretty good.
However when I attach the city to something like so :
selected-object="details.client.addr.city"

And pick a city from the angucomplete-alt

The result on $scope.details.client.addr.city is :
{"city":{"title":"Haifa","description":{"code":"337","city":"Haifa"},"image":"","originalObject":{"code":"337","city":"Haifa"}}}})

My question is:

Can I minify this? it looks like the data structure is pretty much strict and I couldn't change it without breaking the source code.

Thanks for repliers!

Search within objects

How would you do a search within objects?

Sample JSON response below. Trying to autocomplete on name.

{
  "bootstrap": {
    "markers": {
      "w550": {
        "name": "Kuwait City, KW",
        "lat": "29.369722",
        "lng": "47.978333"
      },
      "w551": {
        "name": "Beijing, CN",
        "lat": "39.904214",
        "lng": "116.407413"
      },
      "w1": {
        "name": "Belize City, BZ",
        "lat": "17.497713",
        "lng": "-88.186654"
      },
      "w2747": {
        "name": "Columbia, SC, US",
        "lat": "34.00071",
        "lng": "-81.034814"
      },
      "w6": {
        "name": "Moscow, RU",
        "lat": "55.755786",
        "lng": "37.617633"
      }
    }
  }
}

Explicit tabindex

When trying to set an explicit tabindex to an angucomplete-alt annotated div element, the tabindex applies to the div and not the input field. This prevents input to the input field when navigating through the form with TAB. Is there a way to set an explicit tabindex on the (generated) input field?

Add autofocus attribute

down arrow is not show all list when nothing has been entered

before fix #53, down arrow show all autocomplete list when nothing has been entered.
but after fix #53, it is not work.

placeholder vs. place-holder in docs

In the README, the first example uses "place-holder", but the table later says "placeholder". The latter works correctly, the former does not.

Initial value conflicts with clear-selected

When initial-value is used on the form, and clear-selected is set to true, selecting a value doesn't clear the field.

Post request

Hi,
My app do post request to autocomplete, how we use method post with your plugin? could be optional method as a attr like: method: post

Let me submit my form!

Probably because of this line, when hitting enter after choosing an element from the dropdown, the form is not submitted, even if there is a button of type submit in it. This is super frustrating for a user point of view.

Could it be possible to only prevent default if the dropdown is displayed? Thanks.

mouse hover and cursor up/down mismatch

After hovering over a selection using mouse and then use cursor to up/down selection, two selections become active.

Feature: Prevent form submission when selecting

Thanks for the great directive. I'm using multiple autocompletes in one form, so I wanted to prevent submitting the form when you press "enter." I just added a e.preventDefault() in the else statement on line 298; however, I can see it being added as an attribute (e.g., submit-on-enter, defaulting to true). I can pull and submit if you think it's a worthwhile feature. Thanks!

selected-object function parameter add

Is it possible to use originalObject in selected-object function
like function(value, originalObject) ?

Required support

Hi,
is there support for required attribute?

Custom Template

Hello, nice module.

I want to use a custom template on the results dropdown, i think that maybe adding an attribute like: template="templateUrl" will be great.

This feature will be awesome to customize the way the results will look and event adding some extras feature without extra work.

Overlap with browser auto-complete.

The drop down can overlap with browser auto-complete drop down.

Are you able to disable the browser auto-complete?

matchClass replace

there should be strPart != null check before line 143.

if you search on remote with string not displayed in title or description there is an error.

clear angucomplete-alt after button click

Hi. How do to clear the content of the input angucomplete-alt (scope.searchStr),by controller, for example, when the user click a button?

Automatic Submission w/o enter

Currently, a user has to press the enter key in order to trigger model change or callback function.

Can an attribute to exposed where the above is triggered upon matching in the case of overwrite is false. In the case of overwrite is true, it'll just match all the time.

Ex. Choices {'dog', 'cat', 'pig'} Overwrite is false

1. user types in d, nothing is triggered
2. user types in do, nothing is triggered
3. user types in dog, model change and callback is triggered

put it on Bower

Can you put this plugin in bower packages ?

save content of input field if not selected

Hi! I really like angucomplete-alt and it was easy to integrate. However, I want to use it to suggest search terms in a search form, and there naturally are search terms that are not suggested yet. Can I somehow save the value of the input field into a scope variable? Right now this only seems to work if a user made a selection.

I tried to add an ng-model attribute to the <angucomplete-alt element, but with no result.

If this is not possible then I'll look for another plugin or see if I can extend this. Thanks for your help!

Let me edit my search

It looks like using left / right arrow keys will move the cursor between characters in the input but will also trigger a new search each time, and that bother me because the value didn't actually changed.

It is especially bothersome when you navigate with up / down on the dropdown (which will move the cursor to the begin / end of the value, which is sad by the way), and then you want to edit your value. Navigating inside it will trigger several searches. Not good IMO.

In nearly the same subject (arrow keys). It would be cool to be able to reload the same search using the down arrow key. Right now, you are force to edit the value (even if you want the same) or using left / right keys (but we just said it was probably a bug...)

Add ng-disable

I think it´s really easy to do and usefull. It would be great if i could disable the input when needed.

console.error triggered when HTTP request is cancelled

At line 261 of the source code, there is a console.error('http error'); that can be called. It is problematic for two reasons. First, some browsers do not have such method and it will crash the JS at runtime. Then, it is called when the HTTP request in cancelled (because you are editing the input value while it was searching). It feels strange to have an error in the console while all is fine.

IMO, this line should at least test that console.error actually exists and also check the status code of the failed response, if it's zero, that means the request has been cancelled and there is not need to display anything.

Fix dotted notation

Probably no one is using this feature.
But it looks like dotted notation isn't working for a long time.

Never stop searching

Strange bug... when using a remote url, you start typing, it search, then display results. So far, so good. Then you press on "Escape" and it closes the dropdown. I would expect to stop there. But it actually trigger a new search based on the same value and will display the dropdown again...

When I hide a angucomplete field, validity of a form remains 'invalid'

I create a form with angucomplete field and it is required. If that is visible, validity of a form become 'Invalid' but when it is disappeared validity remains 'invalid'.

http://plnkr.co/edit/rc3N5i?p=preview

You have to handle '$destroy' event properly.

Bug: backspace and delete triggers the selected-object function

And the selected-object function will receive a null.

We can just return the selected-object function when the parameter is null,
but this function should not be triggered when you hit backspace or delete I think.

Required but allow blank option

Anybody wants this feature?
Use case is like this:
http://plnkr.co/edit/FVGRr7?p=preview

Behavior of Select Element

Is there a way to behave angucomplete-alt as a select element i.e. when user first clicks on the element a drop down list of most N elements appear? If it starts typing it become filtering the drop-down list.

Match in description

What do you think of putting match the description?

Leaving the input field will not update the model

I'm using angucomplete-alt with override-suggestions="true", such that a user can enter values that are not in the suggestion list. Unfortunately, when a user jumps to the next input field by pressing the tabulator key or directly clicking on the form submit button, the entered value will not be taken over (see also Example 4 of the demo). Instead, the user must explicitly press the "Enter" key, which is not intuitive in my opinion.

Is there a way to change this behaviour?

Thanks for any help!

Throw an error when handling number data

When given data is an array of number, it throws an error.

How to change the selected object

Hi,

I want to change the selection name on input.
The suggestion returned is "John", but on input, I want put "".
How to maniputate this value on controller parent?

Pressing Enter without selecting an item results in "No results found" message

I am not sure this is a bug but my use case is that this is a search input. If the user presses the Enter key without selecting an item, it would be nice if it would just submit the form and hide the dropdown. I am able to bind ng-keypress on the directive and look for the keycode (13) but that "No result found" message hangs around. Not sure, but is there a method to call to manually open/close the dropdown? Thanks for your hard work by the way.

Auto Complete upon Tabbing

Currently selecting a choice from the dropdown is either done by click on it or pressing enter. Can we also add tab (can be exposed as an alternate key attribute)

KEY_TAB = 9

Thanks!

Update input field as user moves dropdown

Just like Google does, update input field value as user moves up/down items in dropdown.
Does this provide better user experience?
One benefit is that you can edit query term from a suggestion.

Clear searchStr or show invalid status when user doesn't select autocompte list.

Hi, I use angucompte well. Thank you for your contiribution.^^

I want to clearing search string or display invalid status when user doesn't select autocomplete list.
Is there any way to clear search string in focus out call back?

Character counts below the set value should close the dropdown

If I have set the minlength="3", enter 3+ characters, and then start to delete characters, once there are fewer than 3 in the input, the dropdown should close.

callback on no item selected

hey!
is there an option to call a function if a user typed a string which doesn't fit any option in the list?
I'm trying to build a select box with an "add new" functionality , thanks.

on-focus

Hey,
is it possible to bind ng-focus to angucomplete-alt?