Autocomplete for search input.

[Mike-Heneghan]

Autocomplete to be added to allow users to search by town and be suggested a postcode.

This could potentially be achieved using a jQuery library.

[Mike-Heneghan]

Using a free business tool just got a visualisation of a 20km radius around G2 4AA. If we were to create a json representation of towns and they're associated central postcode. Results wouldn't be optimised for distance although it would be useful.

[Mike-Heneghan]

15 - 20 locations to handle in a JQuery UI for autocomplete.

Trigger on three letters.

Provide querystring with the inputted. If the third character is not a number, then we know to open the autocomplete for searching by location.

Stick to JQuery as we're already using it.

Locations search approach.

Look at: http://easyautocomplete.com/

Prototype using Dundee, Erskine and Brechin.

Look at Request Data Delay info for returning the search phrase.

[Mike-Heneghan]

To do list:

• [x] Figure out the way to have the normal postcode field use easy-autocomplete.
• [x] On submit of a location name build the params to search for the associated postcode.
• [ ] Currently, it might be hard less than ideal that the town when selected is a postcode? Although it maybe stays consistent?
• [ ] CSS formatting isn't currently ideal?
• [x] Return the querystring done but not sure it's as intended.

[Mike-Heneghan]

[Mike-Heneghan]

The formatting also isn't ideal with the font size and style not consistent with the rest of the aliss project.

[Mike-Heneghan]

To sort out the css is might be best not to import the minified easy-autocomplete easy-autocomplete.min.css as is currently being done. That way the file can be updated to make it's styling more in line with aliss?

[Mike-Heneghan]

The JS required for the easy-autocomplete.

{% block before_body_close %}
  <script type="text/javascript">
    $(document).ready(function(){
      var options = {
        url: function(phrase) {
            return "http://localhost:5000/search/?q=" + phrase;
        },

        data: [
          {"location_name": "Glasgow", "postcode": "G2 4AA"},
          {"location_name": "Edinburgh", "postcode": "EH2 4AD"},
          {"location_name": "Musselburgh", "postcode": "EH21 6UW"},
        ],

        getValue: "location_name",

        minCharNumber: 3,

        list: {

          match: {
            enabled: true
          },

          onSelectItemEvent: function() {
              var value = $("#postcode").getSelectedItemData().postcode;
              $("#postcode").val(value).trigger("change");
            }
          }
        }

      $("#postcode").easyAutocomplete(options);
    });
  </script>
{% endblock %}

[Mike-Heneghan]

The current state of the autocomplete function: https://drive.google.com/file/d/16Wr38nbikT0vVg7RZzIvIn6U7NSBZwvu/view?usp=sharing

Spent some time trying to find the best way to make the styling consistent with the rest of the project although finding it a bit of a time sink. Might be best to leave this until we next meetup so we can review it.

[Mike-Heneghan]

For the autocomplete function have the postcode appear in brackets behind the location i.e Musselburgh (EH21 6UW).

Send in a PR

[Mike-Heneghan]

To do list:

• [x] Add the postcode in brackets next to the options as a UX improvement.
• [x] Add extra postcodes for testing purposes.
• [x] Check there are no merge conflicts with master or due to the way the autocomplete-library was added to the project.
• [x] Send through a PR

[Mike-Heneghan]

[Mike-Heneghan]

Top cities by population https://en.wikipedia.org/wiki/List_of_towns_and_cities_in_Scotland_by_population

[Mike-Heneghan]

Merged into master