Help with mobile Search Box and Creating a list

BrendanLee · ‎02-05-2013

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>

TracySchloss · ‎02-25-2013

I'm doing something similar and started with a selection prepopulated with just the option 'Pick a county". I only have data for a few counties, so I have a layer that shows the status of whether or not there is data for that particular county. There is an attribute called status. These were the only options I wanted in my list.

      <select data-dojo-type="dijit.form.Select" id="mySelect" onchange="findCountyFromList();" title="Select a county to zoom to it on the map.">
         <option>Pick a county</option>
     </select>

I run a querytask against that layer to find out which counties have the status of "Y". I've placed this in my init code so the list gets populated at start up. In my case, I needed the county names to be sorted alphabetically. I made an array of these names too because I have another use for them.

 var queryTask = new esri.tasks.QueryTask("http://servername/arcgis/rest/services/countyStatus/MapServer/0")
    var query = new esri.tasks.Query();
    query.outFields = ["COUNTYNAME"];
    query.where = "STATUS = 'Y'";
    query.returnGeometry = false;

 dojo.connect(queryTask, "onComplete", function (featureSet){
        var select = dijit.byId("mySelect");
        dojo.forEach(featureSet.features, function (feature){
            var countyName = feature.attributes.COUNTYNAME;
            countyList.push(countyName);
        });
        countyList.sort();
        for (var i = 0; i < countyList.length; i++) {
            var countyName = countyList;
         //   console.log(countyName);
            select.addOption({
             label: countyName,
             value: countyName
           });
        }
    queryTask.execute(query);

Once I had my list populated, I was able to use some of the other examples that showed now to do a query based on selection from the list.

I've not done anything with creating lists as the user types in a box and not seen too many examples of it either.