Openlayers and Jquery autocomplete to open popup from vector layer

Question

I'm developing a map on-line using Openlayers. ON that map I have a Vector layer showing restaurants. Each restaurant is represented by an icon which can be click to open a popup in order to display more info. So far so good. But I want to implement an Autocomplete search in Jquery. So What i want to do is when you select a restaurant name in the autocomplete i would like the map to open the corresponding popup (trigger the popup plus center the map and zoom). I manage to center the map but I cannot figure out for the popup openning.

Here the code i'm using for Autocomplete:

$(function() {
$( "#searchresto" ).catcomplete({
    delay: 0,
    source: "select_resto.php",
     select: function ( event, ui ) 
        {
            map.setCenter(
            new OpenLayers.LonLat( ui.item.h_lon, ui.item.h_lat).transform(
                    new OpenLayers.Projection(Geo_pjt),
                    map.getProjectionObject()
                    ), 5 );
        },

     open: function () {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top");
        },
     close: function () {
        $( this ).removeClass( "ui-corner-top").addClass("ui-corner-all");
        }

});});

And that is my Vector layer:

var resto = new OpenLayers.Layer.Vector("GML", {
            protocol: new OpenLayers.Protocol.HTTP({
                url: "restaurant.php",
                format: new OpenLayers.Format.GML(),

            }),
            strategies: [new OpenLayers.Strategy.Fixed()],
            projection: map.displayProjection,
        });

Does anyone got an idea how to call the popup in the Jquery function? Or maybe what i'm trying to do is impossible?

cadderrik cadderrik · Accepted Answer · 2014-04-08T15:21:30

After long weeks of banging my head on the desk I finally found an answer by myself.

If you are interested see below:

First on the input for your autocomplete add an "onchange="yourfunction()"

 <input type="text" id="searchresto" onchange="yourfunction(this)"/>

Then in you openlayer:

function getFeatureByHid(featureHId) {
        var feature = null;
        var found = false;
        for(var i=0, len=resto.features.length; i<len; ++i) {
            if(resto.features[i].attributes.crID == featureHId) {
                feature = resto.features[i];
                found = true;
                break;
            }
        }

        return feature;
    }

    function SelectRestoByRestoId(crID)
    {
        var feature = getFeatureByHid(crID);
        if (feature)
        {
            restoSelect.unselectAll();
            restoSelect.select(feature);
        }
        return true;
    }   

    function yourfunction(event,ui){
        return SelectRestoByRestoId(ui.item.id);
    }

And finally just call yourfunction in you autocomplete

$(function() {
$( "#searchresto" ).catcomplete({
    delay: 0,
    source: "select_resto.php",
     select: yourfunction 

});});

Done!!!! Anyway thx for not answering I really develop my Javascript skill!!! :) I hope this will help someone!!!

Openlayers and Jquery autocomplete to open popup from vector layer

1 Answers