...

/

Search Box Widget of Model View Intent

Search Box Widget of Model View Intent

Get to know what the implementation of the search box widget looks like as a step-by-step process.

We'll cover the following...

The main method for the implementation of the search widget will look like this:

Press + to interact
var h = CycleDOM.h;
var SearchBox = require('./searchbox');
function main(responses) {
var wpSearchBox = SearchBox({
DOM: responses.DOM,
props$: Rx.Observable.just({
apiUrl: API_URL
})
});
var searchDOM$ = wpSearchBox.DOMTree;
var searchResults$ = responses.JSONP.filter(function(res$) {
return res$.request.indexOf(API_URL) === 0;
})
.concatAll()
.pluck('query', 'search')
.startWith([]);
return {
JSONP: wpSearchBox.JSONPQuery,
DOM: Rx.Observable.combineLatest(searchDOM$, searchResults$, function(
tree,
links
) {
return h('div', [
h('h1', 'Wikipedia Search '),
tree,
h('hr'),
h(
'div',
links.map(function(link) {
return h('div', [
h('a', { href: WIKI_URL + link.title }, link.title)
]);
})
)
]);
})
};
}
Cycle.run(main, {
DOM: CycleDOM.makeDOMDriver('#container'),
JSONP: CycleJSONP.makeJSONPDriver()
});

Now, we will delegate the responsibility of handling user input and ...

Access this course and 1400+ top-rated courses and projects.