Comments (4)
I have solved this problem this way , this is my ember-typeahead component:
(function () {
var getDynamicData = function (key) {
return function findMatches(q, cb) {
var companyObjects = [];
$.ajax({
type: 'get',
async: false,
url: '/api/companies/' + q + '/search',
contentType: "application/json; charset=utf-8"
}).done(function (company) {
$.each(company, function (i, obj) {
var str = Em.isEmpty(obj.name) ? "" : obj.name;
var currObj = { obj: obj };
currObj[key] = str;
companyObjects.push(currObj);
});
cb(companyObjects);
});
}
}
Em.TypeaheadComponent = Em.TextField.extend({
highlight: false,
hint: true,
minLength: 1,
autofocus: true,
_typeahead: null,
selection: null,
didInsertElement: function () {
this._super();
this.initializeTypeahead();
if (this.get('autofocus') === true) {
this.$().focus();
}
},
propertyDidChange: function () {
window.alert('changed');
},
initializeTypeahead: function () {
var that = this, t = null,
options = {
highlight: this.get('highlight'),
hint: this.get('hint'),
minLength: this.get('minLength')
},
dataset = this.get('dataset');
t = this.$().typeahead(options, dataset);
this.set('_typeahead', t);
// Set selected object
t.on('typeahead:selected', function (event, item) {
Em.debug("Setting suggestion");
that.set('selection', item.obj.id);
});
t.on('typeahead:autocompleted', function (event, item) {
Em.debug("Setting suggestion");
that.set('selection', item.obj.id);
});
},
dataset: function () {
var that = this, content = this.get('content');
if (jQuery.isFunction(content)) {
content.then(function (data) {
return that.loadDataset(data);
});
} else {
return this.loadDataset(content);
}
}.property(),
loadDataset: function (content) {
var name = this.get('name') || 'default',
key = this.get('displayKey') || 'value';
return {
name: name,
displayKey: key,
source: getDynamicData(key)
};
}
});
Em.Handlebars.helper('type-ahead', Em.TypeaheadComponent);
})();
from ember-typeahead.
Yep, the dynamic isn't supported yet. If you come up with a good way to do this which works with ED then submit a pull request. Thanks
from ember-typeahead.
Great job!
So far the only way I could get dynamic data to work is to leave out the name and then destroy/build whenever the source changes.
from ember-typeahead.
Heres an example using remote data. Example does not use this plugin though, I needed to adjust a few things.
- remote rather than local data
- uses controller actions rather than 'selection' from this plugin
- extends Ember Component rather than Textfield
I extended Ember Component because Typeahead and Ember's Textfield were interfering for me. I think this is because I switched to sendAction, which Ember Textfield has defaults for. Just found it easier to use component, where I don't have to worry about the views default behavior in combination with Typeahead.
Call component with...
Also doesn't need extra helper registration, empty component template, etc. And gets rid of super call since not extending TextField.
from ember-typeahead.
Related Issues (9)
- Get a really strange error in console HOT 1
- TypeError: undefined is not a function
- (Important question) working with dynamic data
- Can not get it working HOT 1
- App.Post.find() doesn't work ? HOT 6
- Dependencies out of date
- spaces in text fails to be typeahead'ed
- Cannot use more than one acomplete field 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 ember-typeahead.