-1

Since the Wordpress plugin that facilitates this functionality has been deprecated i have decided to leverage the places API https://community.algolia.com/places/examples.html#searching-in-a-country which is not as precise as the search API but began tweaking to see if it will be an easier workaround/alternative to autocompleting some suburbs and regions in my search form.

Something I would like to test on my demo page before making a final decision. The idea is to try to bind the places autosuggest API with my search input field so it will query based on an input event with search terms location (region, suburb) . This could happen upon click > search and/or enter event ? which ever one is convenient for the user…

At this juncture when i enter for instance “accra” which auto suggests “Greater Accra Region” refer to screenshot

autosuggest1

enter image description here

I get returned 21 (wrong) results instead of 6 (correct) which is what we have populated in the wordpress DB for properties in “Greater Accra Region”

wrong url: http://demo.url.com/properties/?_property_type=buy&keyword_search= enter image description here

We are supposed to be getting this http://demo.url.com/properties/?realteo_order=featured&keyword_search=&_property_type=buy&_offer_type=&tax-region=greater-accra-region&_bedrooms=&_bathrooms=&_area_min=0&_area_max=1000&_price_min=1&_price_max=5564045 which is the correct redirected url enter image description here

<!--Here is a snippet of html form in WP template-->
<form action="http://demo.url.com/properties/" id="realteo-search-form" method="GET">
                        <p>Selected: <strong id="single-country-address-value">none</strong></p>
                        <input type="search" id="single-country-search" class="form-control" placeholder="Search City or Suburb test version" /> 
    <!--other form elements here-->
    </form>

<!--Javascript code taken from API https://community.algolia.com/places/examples.html#searching-in-a-country -->
<script type="text/javascript">
(function() {
  var placesAutocomplete = places({
   appId: 'ID comes here',
   apiKey: 'Key Comes here',
    container: document.querySelector('#single-country-search')
  }).configure({
    countries: ['gh']
  });

  var $address = document.querySelector('#single-country-address-value')
  placesAutocomplete.on('change', function(e) {
    $address.textContent = e.suggestion.value
  });

  placesAutocomplete.on('clear', function() {
    $address.textContent = 'none';
  });

  var $country = document.querySelector('#country-selector')
  $country.addEventListener('change', function(e){
    placesAutocomplete.configure({ countries: [e.target.value] });
  })

})();

</script>

Any tips on the best approach or code samples? My idea is to parse a string upon element select via an autosuggest API called Algolia which should expect a string to point to a URL resource that will return data (json or?) via a wordpress url resource (ajax or?). The Algolia API might not filter the results, instead a query string will be returned for the respective term field, which our server-side script should use for filtering the search results. For example, if the data source option is set to "http://demo.url.com/properties/" and the user types Accra, a GET request would be made to http://demo.url.com/properties/?term=Accra or something which will reflect the correct results on search results page.

  • 1
    What feedback are you thanking us for? What plugin has been deprecated? Please check out our short tour to learn about our focussed Q&A format. Please do not include chit chat like greetings, statements of appreciation/thanks, etc - see meta.stackexchange.com/questions/2950 I recommend reviewing meta.gis.stackexchange.com/a/3353/115 for tips on how to structure a good question. – PolyGeo Sep 30 at 0:17
  • @PolyGeo Sorry that was an oversight since i posted the same question in the API providers forum. I have corrected the first paragraph whiles i look into the tips and tricks on how to structure a good question. In the meantime hope the edit makes the question a bit more readable. – john zuh Sep 30 at 19:00
0

Edited version of the Places javascript code that finally did the trick

<!--Javascript code taken from API https://community.algolia.com/places/examples.html#searching-in-a-country -->
<script type="text/javascript">
  (function () {
    var placesAutocomplete = places({
      appId: "ID comes here",
      apiKey: "Key comes here",
      container: document.querySelector("#single-country-search"),
    }).configure({
      countries: ["gh"],
    });

    var $address = document.querySelector("#single-country-address-value");
    placesAutocomplete.on("change", function (e) {
      var searchTerm = e.suggestion.name;
      var searchType = document.getElementById("_property_type").value;
      console.log(searchTerm, searchType);
      var url = `http://demo.url.com/properties/`;
      console.log(url);
      window.location.href = url;

      $address.textContent = e.suggestion.value;
    });

    placesAutocomplete.on("clear", function () {
      $address.textContent = "none";
    });

    var $country = document.querySelector("#country-selector");
    // $country.addEventListener("change", function (e) {
    placesAutocomplete.configure({ countries: ["gh"] });
    // });
  })();
</script>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.