0

I'm trying to fire a click event on my search button and/or the input field as soon as a user selects something from the jQuery autocomplete <li>:

https://jsfiddle.net/grh2dLyw/1/

I'm not sure where to put this (#zoominmap is my button, #columnsearch the input field):

document.getElementById('zoominmap').click();

This is my code:

        function initAutocomplete() {
        function log( message ) {
          $( "<header>" ).text( message ).prependTo( "#log" );
          $( "#log" ).scrollTop( 0 );
        }

        $( "#columnsearch" ).autocomplete({
          source: function( request, response ) {
                SQL_CLIENT.request({
                params: {
                    q: "SELECT name FROM " + dataSet + " where name Ilike '%" + request.term + "%'"},}).then(function(data) {
               response($.map(data.data.rows, function (item) { 
                  return {
                    label: item.name,
                    value: item.name
                  }
                })
              )
            })
          },
          minLength: 3,
          select: function( event, ui ) {
            log( "Selected: " + ui.item.value );
                }
            });
        };

        // start jQuery autocomplete
        initAutocomplete();

        // search with AJAX
        $('#zoominmap').click(function () {
            if(previousSelection){
                map.removeLayer( previousSelection );   // if you're using Leaflet and map variable is named 'map'
            }
            input = $("#columnsearch").val();
            $.ajax({
            type: "GET",
            url: `https://schwaebische.carto.com/api/v2/sql?format=geojson&q=SELECT the_geom FROM ${dataSet} where name Ilike '${input}'`,
            dataType: "json",
            success: function (response) {
                geojsonLayer = L.geoJson(response)
                map.fitBounds(geojsonLayer.getBounds(), {maxZoom: maximumZoom, pan: {animate: true, duration: 0.5, easeLinearity: 0.25}});
            L.geoJson(response, {
                style: function (feature) {
                    return {color: "#FFF", opacity: 1, weight: 3};
                },
                onEachFeature: function(feature, layer){
                    // remove this layer after another polygon is selected
                    previousSelection = layer;
                    }
                }).addTo(map);  
        }});
    })
2

1 Answer 1

0

You are using the select() function of the autocomplete widget quite correctly. However, you have to replace the typed-in value by the selected value if you want to process it further:

select: function( event, ui ) {
  document.getElementById("columnsearch").value = ui.item.value //Set selected town
  document.getElementById('zoominmap').click();
}

Then the correct value is used in the click() function:

input = $("#columnsearch").val(); // "Stuttgart" rather than "stutt"
2
  • This works flawlessly - thank you very much! <3
    – trashjazz
    Commented Oct 26, 2018 at 13:39
  • Please accept my answer as solution. :) Commented Oct 26, 2018 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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