Simple search feature and zoom to it

Discussion created by mamayaig on Jun 25, 2013
Latest reply on Jun 26, 2013 by vinaybansal
i am  new in javascript, and i only have to do is , in a layer (POINT) make a search by one atributte and zoom to result (only one)    in my basemap and draw a symbol to show the location of it.

in my code you can put the value, and find the attributes  but the zoom to the results doesnt work.  i used an example and modify it.
Thank you

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Display Find Task results in Dojo DataGrid</title>

    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    <script>var dojoConfig = { parseOnLoad:true }</script>
    <script src=""></script>
      var findTask, findParams;
      var map, center, zoom;
      var grid, store;

      function init() {
        dojo.connect(grid, "onRowClick", onRowClickHandler);

        //center = [-83.266, 42.568];
        //zoom = 11;
            center = [-87.246, 14.098];
        zoom = 13;
        map = new esri.Map("map");
        var layer = new esri.layers.ArcGISTiledMapServiceLayer("");


        //Create Find Task using the URL of the map service to search
        findTask = new esri.tasks.FindTask("");

        dojo.connect(map, "onLoad", function() {
          //Create the find parameters
          findParams = new esri.tasks.FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
    findParams.searchFields = ["THEID"];
          //findParams.searchFields = ["OWNERNME1","OWNERNME2"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);

      function doFind() {
        //Set the search text to the value in the box
        findParams.searchText = dojo.byId("ownerName").value;

      function showResults(results) {
        //This function works with an array of FindResult that the task returns;
        var symbol =  new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(new dojo.Color([255,0,0,0.5]));
        //new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));
                    // new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,   new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,    new dojo.Color([255,0,0]), 1),   new dojo.Color([0,255,0,0.25]));
        //create array of attributes
        var items =,function(result){
          var graphic = result.feature;
          return result.feature.attributes;
        //Create data object to be used in store
        var data = {
          identifier: "THEID",  //This field needs to have unique values
          label: "THEID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
          items: items

         //Create data store and bind to grid.
        store = new{ data:data });
        var grid = dijit.byId('grid');

        //Zoom back to the initial map extent
        map.centerAndZoom(center, zoom);

      //Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).THEID;
        var selectedTaxLot;

          if((graphic.attributes) && graphic.attributes.THEID === clickedTaxLotId){
            selectedTaxLot = graphic;
        var taxLotExtent = selectedTaxLot.geometry.getExtent();

  <body class="claro">
  <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:40px;">
      ID Number: <input type="text" id="ownerName" size="60" value="1234567" />
      <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
          <th field="THEID">ID Number</th>
          <th field="NAME" width="100%">Client Name</th>