var document = require('global/document');
var value = require('observ');
var struct = require('observ-struct');
var Delegator = require('dom-delegator');
var mainLoop = require('main-loop');
var h = require('virtual-hyperscript');
var MultipleEvent = require('geval/multiple');
var changeEvent = require('value-event/change');

var courses = require('./catalog');

var state = struct({
  query: value(''),
  events: MultipleEvent(['change'])
});

state.events.change(function(data) {
  state.query.set(data.query);
});

Delegator();
var loop = mainLoop(state(), render);
document.body.appendChild(loop.target);
state(loop.update);

function render(state) {
  var results = courses.filter(function(course) {
    return course.name.toLowerCase().indexOf(state.query) >= 0
        || course.code.toLowerCase().indexOf(state.query) >= 0;
  });

  var ret = [];

  var inputField = h('input', {
    type: 'text',
    name: 'query',
    value: String(state.query),
    'ev-event': changeEvent(state.events.change),
    autofocus: true
  });

  results.forEach(function(course) {
    ret.push(h('li', [
      h('h3', [
        h('span.code', course.code),
        h('span', ' ' + course.name)
      ]),
      h('p', course.description)
    ]));
  });

  return h('div', [
    inputField,
    h('ul', ret)
  ]);
}
var document = require('global/document');
var value = require('observ');
var struct = require('observ-struct');
var Delegator = require('dom-delegator');
var mainLoop = require('main-loop');
var h = require('virtual-hyperscript');
var MultipleEvent = require('geval/multiple');
var changeEvent = require('value-event/change');

var courses = require('./catalog');

var state = struct({
  query: value(''),
  events: MultipleEvent(['change'])
});

state.events.change(function(data) {
  state.query.set(data.query);
});

Delegator();
var loop = mainLoop(state(), render);
document.body.appendChild(loop.target);
state(loop.update);

function render(state) {
  var results = courses.filter(function(course) {
    return course.name.toLowerCase().indexOf(state.query) >= 0
        || course.code.toLowerCase().indexOf(state.query) >= 0;
  });

  var ret = [];

  var inputField = h('input', {
    type: 'search',
    name: 'query',
    value: String(state.query),
    'ev-event': changeEvent(state.events.change),
    autofocus: true
  });

  results.forEach(function(course) {
    ret.push(h('li', [
      h('h3', [
        h('span.code', course.code),
        h('span', ' ' + course.name)
      ]),
      h('p', course.description)
    ]));
  });

  return h('div', [
    inputField,
    h('ul', ret)
  ]);
}
Change search field type to "search"
Change search field type to "search"

This is like "text" except that a little "x" button appears so that one can
easily clear the field. Also, on mobile browsers, the action button on the
keyboard will display "Search" instead of just "Go".

Old browsers will gracefully fallback to "text" anyways, so this is a
progressive enchancement.
