diff --git a/js/id/ui/feature_list.js b/js/id/ui/feature_list.js index 8a6646896..1428ac00b 100644 --- a/js/id/ui/feature_list.js +++ b/js/id/ui/feature_list.js @@ -6,22 +6,25 @@ iD.ui.FeatureList = function(context) { header.append('h3') .text(t('inspector.feature_list')); - function keyup() { + function keypress() { var q = search.property('value'); if (d3.event.keyCode === 13 && q.length) { click(list.selectAll('.feature-list-item:first-child').datum()); - } else { - drawList(); } } + function inputevent() { + drawList(); + } + var searchWrap = selection.append('div') .attr('class', 'search-header'); var search = searchWrap.append('input') .attr('placeholder', t('inspector.search')) .attr('type', 'search') - .on('keyup', keyup); + .on('keypress', keypress) + .on('input', inputevent); searchWrap.append('span') .attr('class', 'icon search'); diff --git a/js/id/ui/preset_list.js b/js/id/ui/preset_list.js index 0eac5e960..e434c81bc 100644 --- a/js/id/ui/preset_list.js +++ b/js/id/ui/preset_list.js @@ -51,23 +51,26 @@ iD.ui.PresetList = function(context) { } } - function keyup() { + function keypress() { // enter var value = search.property('value'); if (d3.event.keyCode === 13 && value.length) { list.selectAll('.preset-list-item:first-child').datum().choose(); + } + } + + function inputevent() { + var value = search.property('value'); + list.classed('filtered', value.length); + if (value.length) { + var results = presets.search(value, geometry); + message.text(t('inspector.results', { + n: results.collection.length, + search: value + })); + list.call(drawList, results); } else { - list.classed('filtered', value.length); - if (value.length) { - var results = presets.search(value, geometry); - message.text(t('inspector.results', { - n: results.collection.length, - search: value - })); - list.call(drawList, results); - } else { - list.call(drawList, context.presets().defaults(geometry, 36)); - } + list.call(drawList, context.presets().defaults(geometry, 36)); } } @@ -79,7 +82,8 @@ iD.ui.PresetList = function(context) { .attr('placeholder', t('inspector.search')) .attr('type', 'search') .on('keydown', keydown) - .on('keyup', keyup); + .on('keypress', keypress) + .on('input', inputevent); searchWrap.append('span') .attr('class', 'icon search');