diff --git a/css/app.css b/css/app.css
index 46148a605..329e57d0d 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1269,6 +1269,22 @@ a.success-action {
}
.preset-section.cf,
+.inspector-preset.cf,
.preset-section-input.cf {
width: 100%;
}
+
+.preset-search-input {
+ width:100%;
+}
+
+.preset-search-input input {
+ width: 100%;
+ padding: 5px;
+}
+
+.preset-search-result {
+ padding: 0px 10px;
+ height:30px;
+ margin: 5px;
+}
diff --git a/index.html b/index.html
index 2ec9d79ee..26a78a853 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,7 @@
+
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index eae7da717..25eafe747 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -9,8 +9,6 @@ iD.ui.inspector = function() {
function inspector(selection) {
var entity = selection.datum();
- var possiblePresets = presetData.match(entity);
-
var inspector = selection.append('div')
.attr('class','inspector content');
@@ -24,12 +22,18 @@ iD.ui.inspector = function() {
var inspectorwrap = inspectorbody.append('div')
.attr('class', 'inspector-inner tag-wrap fillL2');
- if (possiblePresets.length) {
- var inspectorpreset = inspectorwrap.append('div')
- .attr('class', 'inspector-preset cf')
- .call(iD.ui.preset()
- .preset(possiblePresets[0]));
- }
+ var inspectorpresetsearch = inspectorwrap.append('div')
+ .attr('class', 'inspector-preset cf')
+ .call(iD.ui.presetsearch()
+ .entity(entity)
+ .presetData(presetData)
+ .on('choose', function(preset) {
+ inspectorpreset.call(iD.ui.preset()
+ .preset(preset));
+ }));
+
+ var inspectorpreset = inspectorwrap.append('div')
+ .attr('class', 'inspector-preset cf');
inspectorwrap.append('h4')
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index 0521580f4..173599a01 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -66,8 +66,7 @@ iD.ui.preset = function() {
var wrap = s.append('div')
.attr('class', 'preset-section-input cf');
- wrap
- .append('div')
+ wrap.append('div')
.attr('class', 'col6')
.text(d.text);
diff --git a/js/id/ui/presetsearch.js b/js/id/ui/presetsearch.js
new file mode 100644
index 000000000..c1861e67b
--- /dev/null
+++ b/js/id/ui/presetsearch.js
@@ -0,0 +1,61 @@
+iD.ui.presetsearch = function() {
+ var event = d3.dispatch('choose'),
+ presetData;
+
+ function search(selection) {
+ var viable = presetData.match(entity);
+
+ function filter(value) {
+ value = value.toLowerCase();
+ return viable.filter(function(v) {
+ return v.name.toLowerCase().indexOf(value) !== -1;
+ });
+ }
+
+ function showResults() {
+ var values = filter(this.value).slice(0, 10);
+
+ var res = search_output.selectAll('div.preset-search-result')
+ .data(values, function(d) { return d.name; });
+
+ res.exit().remove();
+
+ res.enter()
+ .append('button')
+ .attr('class', 'preset-search-result')
+ .text(function(d) {
+ return d.name;
+ })
+ .on('click', function(d) {
+ search_output
+ .selectAll('button.preset-search-result')
+ .remove();
+ event.choose(d);
+ });
+ }
+
+ selection.append('div')
+ .attr('class', 'preset-search-input')
+ .append('h3')
+ .append('input')
+ .on('keyup', showResults)
+ .on('change', showResults);
+
+ var search_output = selection.append('div')
+ .attr('class', 'preset-search-output');
+ }
+
+ search.presetData = function(_) {
+ if (!arguments.length) return presetData;
+ presetData = _;
+ return search;
+ };
+
+ search.entity = function(_) {
+ if (!arguments.length) return entity;
+ entity = _;
+ return search;
+ };
+
+ return d3.rebind(search, event, 'on');
+};