Working with array of strings is limiting

[egervari]

Hi there,

I'm trying this out, since I was looking for an autocomplete directive to use in my app.

One problem I have (design wise) is that the array your directive expects is of type string.

I think it would be more flexible if this was an array of objects, and then you could provide options for what property within the array is the label and what property is the value.

A very common use case for this is to get the id of the thingy inside the auto-complete box. The string is often not unique and not all that useful.

Is there a way to do this with your directive? And if not, I suggest adding such a feature.

Thanks for listening.

[kirstu]

I agree with this. Now I have to write additional logic to match the selected result with the actual data.

[CarlosCuevas]

Running into this limitation myself.

[egervari]

Yeah, it's frustrating. I just abandoned the directive and wrote my own, sadly. I also needed the ability to customize the template of the autocomplete as well - a string wouldn't suffice.

I think this is what an auto complete directive needs to look like to work for simple and complex cases:

    <auto-complete-input items="users" term="term" 
                         on-search="searchUsers(term)"
                         on-select="selectUser(item)"
                         placeholder="Type in a user's name or email...">
        <div class="autoCompleteMenu users">
            <ul>
                <li auto-complete-input-item="user" ng-repeat="user in users">
                    <stream-image location="user.avatar" otherwise="img/avatar.png" class="outline small avatar"></stream-image>
                    <span class="userFullName">{{user.fullName}}</span>
                </li>
            </ul>
        </div>
    </auto-complete-input>

Which enables this:

[jonnysowards]

I dont have time to rework the code and push it back but this is the inital layout of a template that uses objects and it works, replace partNum with the string value you want for your object. Eventually I would like to create maybe a directive that specifies the attribute with the string attributes name that you would like to use for autocomplete in this case partNum.

template: '\
    <div class="autocomplete {{ attrs.class }}" id="{{ attrs.id }}">\
      <input\
        type="text"\
        ng-model="searchParam"\
        placeholder="{{ attrs.placeholder }}"\
        class="{{ attrs.inputclass }}"\
        id="{{ attrs.inputid }}"/>\
      <ul ng-show="completing">\
        <li\
          suggestion\
          ng-repeat="(key,val) in suggestions | filter:searchFilter | orderBy:\'val.partNum\' track by $index"\
          index="{{ $index }}"\
          val="{{ val.partNum }}"\
          ng-class="{ active: ($index === selectedIndex) }"\
          ng-click="select(val.partNum)"\
          ng-bind-html="val.partNum | highlight:searchParam"></li>\
      </ul>\
    </div>'

[CarlosCuevas]

I ended up using http://angular-ui.github.io/bootstrap/

[anderssim]

Hi!

backwarkgraphics I tried to replace the default-template code with that of yours. And then I passed it an array like this-

var array = [{key: "value"}];

Just to test it- But im getting this error from the app.filter TypeError: Cannot read property 'replace' of undefined

You will have to excuse me, I am a novice. Could you tell me what I am missing here?

[jonnysowards]

@andersManden I ended up writing my own autocomplete directive check it out and let me know if you have any questions: https://github.com/backwardgraphics/angular-autocomplete.

[JustGoscha]

You don't have too use an array of string. If you change the template, you probably can use any kind of object. Then you also have to change the filter if you don't want to filter for every property.

I have also reworked this directive already for my own uses, which can handle much more complex cases, but I hadn't time to make it publicly available, cause it is in proprietary use right now, and not well documented... it's also in coffee script. It can handle all kinds of objects, filter by any property, handle different templates, can be used multiple times on a single site and can even handle multiselect for something like tags.

If I have like a week of free time I will work it back into this repository, if somebody need's it.

[noahbornstein]

Any updates here by any chance? Just found this, and I'd definitely use the more complex case.

@backwardgraphics I'd use your directive, but I'm pretty set on not using jQuery.

[jonnysowards]

@noahbornstein I have updated this so it no longer depends on jQuery if you still are looking for something.