Comments (10)
I agree with this. Now I have to write additional logic to match the selected result with the actual data.
from allmighty-autocomplete.
Running into this limitation myself.
from allmighty-autocomplete.
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:
from allmighty-autocomplete.
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>'
from allmighty-autocomplete.
I ended up using http://angular-ui.github.io/bootstrap/
from allmighty-autocomplete.
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?
from allmighty-autocomplete.
@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.
from allmighty-autocomplete.
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.
from allmighty-autocomplete.
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.
from allmighty-autocomplete.
@noahbornstein I have updated this so it no longer depends on jQuery if you still are looking for something.
from allmighty-autocomplete.
Related Issues (20)
- Not losing focus
- Support ng-disabled
- Pass id into on-type
- work like gmail or another email client
- Is it possible to show all list on initial focus or when suggestion is null?
- ng-enter search
- Closes the scrollable list of items if you click on scroll button HOT 2
- Read-Only & Disabled?
- suggestion problem
- Doesn't with array of objects HOT 1
- Add input-type=search (configureable)
- Disable spellcheck on mobile devices
- want to clear value in input type HOT 1
- How i can get the value ?
- tabindex not working
- Can multiple select?
- How I use ng-change?
- what modification required for using within ng-repeat
- getting console error on typing in autocomplete text box HOT 1
- any body implemented Add new item when no result found HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from allmighty-autocomplete.