blee3467

Help with mobile Search Box and Creating a list

Discussion created by blee3467 on Feb 5, 2013
Latest reply on Feb 25, 2013 by schlot
I'm new to javaScript and mobile applications. I've cobbled together an application using various smaples.

I want to be able to run a query on a mapservice and populate an array of valid names. then pass that array to a search box to create a list of valid names and create a list of matches as the user types in the box.
At this point, I don't know how to populate the box, and then what to do when the user types in the box. The function onSearch isn't incomplete. I haven't found any good samples online. Any help is appreciated.

-Also, I'd like to be able to make it so that the View goes back to the map and runs a query to zoom to the park.

Thanks!
Brendan

Below is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples  
      on iOS devices--> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <meta name="format-detection" content="telephone=yes"> 
 
    <title>Henderson Parks and Trails</title> 
 
 <link type="text/css" rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/mobile/themes/iPhone/iPhone.css" /> 
 <link type="text/css" rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/mobile/themes/buttons.css" /> 
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" /> 
 <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/PopupMobile.css'/>
 
 <style type="text/css"> 
  html, body { 
   height: 100%; 
   margin: 5px; 
   padding: 0px; 
   width: 100%; 
  } 
 </style> 
 
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"   data-dojo-config="async:true"></script> 
 
    <script language="JavaScript" type="text/javascript"> 
   
   dojo.require("dojox.mobile.parser"); 
      dojo.require("dojox.mobile"); 
      dojo.require("dojox.mobile.Button"); 
   dojo.require("dojox/mobile/SearchBox");
   dojo.require("dojox/mobile/RoundRectList");
   dojo.require("dojox/mobile/ListItem");
   dojo.require("dojo/store/Memory");
   dojo.require("dojo/_base/array");
   dojo.require("dojo.data.ItemFileReadStore");

      dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); 

      dojo.require("esri.map"); 
      dojo.require("esri.dijit.Legend"); 
      dojo.require("esri.arcgis.utils"); 
      dojo.require("esri.tasks.identify"); 
   dojo.require("esri.tasks.query");
      dojo.require("esri.tasks.find"); 
   dojo.require("esri.layers.FeatureLayer");
   dojo.require("esri.tasks.geometry");
   dojo.require("esri.dijit.PopupMobile");
   
   var store;
      var map;
   var symbol, polylineSymbol, startSymbol;
   var identifyTask, identifyParams;
      var query, queryTask;
   var findparams, findTask;
      var featureSet;
      var legendLayers = []; 
   var content;
   var startGraphic
   var watchID;
   var popup;
  
      function init() 
      {  
   var popup = new esri.dijit.PopupMobile(null,dojo.create("div"));

         map = new esri.Map("map", {logo:false, sliderStyle:"small", infoWindow:popup}); 
              
   // Add basemap
         var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server/ArcGIS/rest/services/public/BaseMap_no_parcels/MapServer"); 
         map.addLayer(basemap);
   
      
                      //resize the map when the browser resizes 
  dojo.connect(map, 'onLoad', function(theMap) { 
            dojo.connect(dijit.byId('map'), 'resize', map,map.resize); 
         });                
      } 
    
 function locationError(error) { 
  switch (error.code) { 
   case error.PERMISSION_DENIED: 
    alert("Permission Denied"); 
    break; 
 
   case error.POSITION_UNAVAILABLE: 
    alert("Current location not available"); 
    break; 
 
   case error.TIMEOUT: 
    alert("Timeout"); 
    break; 
 
   default: 
    alert("unknown error"); 
    break; 
  } 
 } 
 
 function getCurrent_Loc(){
  if (navigator.geolocation) { 
   map.graphics.clear();
   navigator.geolocation.getCurrentPosition(showLocation, locationError); 
  } 
 }
  
 function showLocation(location) { 
  if (location.coords.accuracy <= 500) { 
    
   var geoService = new esri.tasks.GeometryService("http://server/ArcGIS/rest/services/Tools/Geometry/GeometryServer");      
   var pt = new esri.geometry.Point(location.coords.longitude, location.coords.latitude, new esri.SpatialReference ({wkid:4236}));   
   //var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(location.coords.longitude, location.coords.latitude));
   var outSR = new esri.SpatialReference({wkid: 3421}); 

   geoService.project([pt], outSR, function(projectedPoints) { 
    pt = projectedPoints[0]; // current location    
    
    map.centerAndZoom(pt, 4);
    startGraphic = new esri.Graphic(pt, startSymbol); 
    map.graphics.add(startGraphic);    
   });           
  } 
  else { 
   console.log("Point not added due to low accuracy: " + location.coords.accuracy); 
  } 
 }

 function makeList(){
  
  // Query to search box with names
  query = new esri.tasks.Query();
  query.returnGeometry = false;
  query.where = "EXISTING = 'Y'";
  query.outFields = ["NAME"];
  
  // Run query on startup
  queryTask = new esri.tasks.QueryTask("http://server/ArcGIS/rest/services/public/ParksTrails/MapServer/5");
  queryTask.execute(query,populateCbo);
 }
 
 function populateCbo(results) {
 //Populate the search box with values
  var parkName;
  var values = new Array(); 
  var features = results.features;
  
  // Loop thru park names and add to array to populate drop-down
  dojo.forEach (features, function(feature) {
   parkName = feature.attributes.NAME;
   values.push({name:parkName});
  });
    
  store = new Memory({data: values});  
 }
 
 
 function onSearch(results, query, options){
  if(options.start == 0){
   list.destroyDescendants();
  }
  
  list.addChild(new ListItem({label: 'Page '+(options.start/options.count+1)+
   ' of '+Math.ceil(results.total/options.count), header:true }));
   array.forEach(results, function(item){
    list.addChild(new ListItem({label: item.name}));
   });
  if((options.start+results.length) < results.total){
   results.nextPage();
  }
  };

      dojo.addOnLoad(init); 
    </script>  
  </head>  
 
 <body> 
   <div id="homeView" dojoType="dojox.mobile.View" selected="true" style="width:100%;height:100%;"> 
   <div style="width:100%;height:90%;" id="map"></div> 
   <ul dojoType="dojox.mobile.RoundRectList"> 
    <li id="search" dojoType="dojox.mobile.ListItem" moveTo="searchView"> 
     Search
    </li> 
   </ul>  
  </div> 
 
 <div id="searchView" dojoType="dojox.mobile.View"> 
  <h1 dojoType="dojox.mobile.Heading" back="Map" moveTo="homeView">Search</h1>
  <ul dojoType="dojox.mobile.RoundRectList"> 
   <li id="parkName" dojoType="dojox.mobile.ListItem" moveTo="parknameView" onClick="makeList();"> 
    Park Name 
   </li>
   <li id="nearMe" dojoType="dojox.mobile.ListItem" moveTo="homeView" onClick="getCurrent_Loc();">
    Near Me
   </li>
  </ul> 
 </div> 
 
 <div id="parknameView" dojoType="dojox.mobile.View"> 
  <h1 dojoType="dojox.mobile.Heading" back="Back" moveTo="searchView">Park Name Search</h1> 
  <input data-dojo-type="dojox.mobile.SearchBox" id="searchBox" type="search" placeHolder="Enter Park Name"
   data-dojo-props='store:store, searchAttr:"name", ignoreCase:true, onSearch:onSearch, pageSize:5'>
  <ul data-dojo-type="dojox.mobile.RoundRectList" jsId="list"></ul>
 </div>
 
  </body>
</html> 

Outcomes