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);  
        }});
    })
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"
  • This works flawlessly - thank you very much! <3 – trashjazz Oct 26 '18 at 13:39
  • Please accept my answer as solution. :) – Stefan Oct 26 '18 at 14:29

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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