Jul 13 - Update listings page with State list and searchable

app/templates/listings/browse.html

@@ -24,8 +24,29 @@
           {% endfor %}
         </select>
       </div>
+      {% set US_STATES = [
+        ('AL','Alabama'),('AK','Alaska'),('AZ','Arizona'),('AR','Arkansas'),
+        ('CA','California'),('CO','Colorado'),('CT','Connecticut'),('DE','Delaware'),
+        ('DC','District of Columbia'),('FL','Florida'),('GA','Georgia'),('HI','Hawaii'),
+        ('ID','Idaho'),('IL','Illinois'),('IN','Indiana'),('IA','Iowa'),('KS','Kansas'),
+        ('KY','Kentucky'),('LA','Louisiana'),('ME','Maine'),('MD','Maryland'),
+        ('MA','Massachusetts'),('MI','Michigan'),('MN','Minnesota'),('MS','Mississippi'),
+        ('MO','Missouri'),('MT','Montana'),('NE','Nebraska'),('NV','Nevada'),
+        ('NH','New Hampshire'),('NJ','New Jersey'),('NM','New Mexico'),('NY','New York'),
+        ('NC','North Carolina'),('ND','North Dakota'),('OH','Ohio'),('OK','Oklahoma'),
+        ('OR','Oregon'),('PA','Pennsylvania'),('RI','Rhode Island'),('SC','South Carolina'),
+        ('SD','South Dakota'),('TN','Tennessee'),('TX','Texas'),('UT','Utah'),
+        ('VT','Vermont'),('VA','Virginia'),('WA','Washington'),('WV','West Virginia'),
+        ('WI','Wisconsin'),('WY','Wyoming')] %}
+      {% set state_names = dict(US_STATES) %}
+      {% set cur_state = filters.get('state','')|upper %}
       <div class="field"><label>{{ _('State') }}</label>
-        <input class="input" name="state" maxlength="2" value="{{ filters.get('state','') }}"></div>
+        <input class="input" id="state-search" list="us-states" autocomplete="off"
+               placeholder="{{ _('Type a state…') }}" value="{{ state_names.get(cur_state, '') }}">
+        <input type="hidden" name="state" id="state-code" value="{{ cur_state }}">
+        <datalist id="us-states">
+          {% for code, name in US_STATES %}<option value="{{ name }}">{{ code }}</option>{% endfor %}
+        </datalist></div>
       <div class="row2">
         <div class="field"><label>{{ _('Min $') }}</label>
           <input class="input" name="min_price" type="number" value="{{ filters.get('min_price','') }}"></div>
@@ -75,4 +96,34 @@
     </div>
   </section>
 </div>
+
+<script>
+// State combobox: user searches/selects a full state name; we submit the 2-letter
+// code via the hidden field. Also accepts a raw 2-letter code typed directly.
+(function () {
+  var input = document.getElementById('state-search');
+  var hidden = document.getElementById('state-code');
+  var dl = document.getElementById('us-states');
+  if (!input || !hidden || !dl) return;
+  var byName = {}, byCode = {};
+  Array.prototype.forEach.call(dl.options, function (o) {
+    var name = o.value, code = o.textContent.trim();
+    byName[name.toLowerCase()] = code;
+    byCode[code.toUpperCase()] = name;
+  });
+  function sync() {
+    var v = input.value.trim();
+    if (!v) { hidden.value = ''; return; }
+    if (byName[v.toLowerCase()]) { hidden.value = byName[v.toLowerCase()]; return; }
+    if (byCode[v.toUpperCase()]) {            // user typed the code itself
+      hidden.value = v.toUpperCase();
+      input.value = byCode[v.toUpperCase()];
+      return;
+    }
+    hidden.value = '';                        // unrecognized → no state filter
+  }
+  input.addEventListener('input', sync);
+  input.addEventListener('change', sync);
+})();
+</script>
 {% endblock %}