AnsweredAssumed Answered

Destroy and recreate new filteringselect

Question asked by schlot on Jun 24, 2016
Latest reply on Mar 18, 2019 by Mr_Kirkwood

I don't have my services at 10.3, so I can't use the search widget las a find to search through my data.  Instead, I'm creating my own version.


I want to have an input field that allows the user to enter in part of a school name.  Based on the string they enter, I want to display a list of elements that include what they entered.  This becomes a filteringselect they can choose from.


This works for the first pass.  My sequence for destroying the previous filteringselect and creating a new one is off.  I thought I could wrap it in a div tag and use domConstruct.empty('searchDivName').  However when I attempt to create a new filteringselect, I'm getting one of those 'Tried to register widget with id XXX, but this is already registered' errors. 


I thought if I just emptied the div that contained the original filteringselect, I'd be OK.  Maybe I'm trying to destroy the wrong element?


<div id="toolDiv">
<label for="txtSchool > School Search </label>
       <input id="txtSchool" type="text" placeHolder='Enter school' />
          <div id="schoolSearchDiv" >  </div>
  <div id="schoolNote" class="tip" ></div>


event listener

  on(dom.byId("txtSchool"), "keydown", function(evt){
    switch (evt.keyCode){
        case keys.ENTER:
  var tbVal =
      console.log("You entered: " + tbVal );


mySchoolSelect.js that executes


define ([  
    ], function (  
      on,dom,domConstruct, domClass, arrayUtils, registry,Memory,FilteringSelect,Query,QueryTask,
    ) {  
    return {
      createSelect: function(tbVal,pointLayer){
        var selectList = [];
        var urlPath = pointLayer.url;  //creates the proper url for findtask from a featurelayer url
        var urlLen = urlPath.length;
        var lastPos = urlPath.lastIndexOf("/");
        var findUrl = urlPath.substr(0, lastPos);
          var findTask = new FindTask(findUrl);
          findParams = new FindParameters();
          findParams.returnGeometry = false;
          findParams.layerIds = [0];  
          findParams.searchFields = ['Facility']; //Fields are CASE SENSITIVE
          findParams.outSpatialReference = app.spatialReference;   
          findParams.searchText = tbVal;

  if (results.length < 1) {
    alert("No matches found for " + tbVal);
  dom.byId("schoolNote").innerHTML = "No matches found";
  }else {
  console.log("You found " + results.length + " matches");  
  dom.byId("schoolNote").innerHTML = results.length + " matches found, please select one";

  domConstruct.create("input", {id: 'schoolSelDiv' }, "schoolSearchDiv" );
  selectList.length = 0;

  arrayUtils.forEach(results, function(r){
  var name = r.feature.attributes.Facility + " - " + r.feature.attributes.City;
  var val = r.feature.attributes.CtyDist;
  label: name,
  value: val
  selectList.sort(function(item1, item2){
  var label1 = item1.label.toLowerCase(), label2 = item2.label.toLowerCase();
  return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0;

  var dataStore = new Memory({
  data: selectList,
  idProperty: "value"

  var mySelect = new FilteringSelect({
  id: 'schoolSelect',
  placeHolder: 'Pick one',
  ignoreCase: true,
  queryExpr: '${0}*',
  maxHeight: 200,
  store: dataStore,
  searchAttr: 'label'
  }, "schoolSelDiv");


  on(mySelect, 'change', function(){
  var selectedCode = mySelect.value;
  console.log("mySelectchange event, selected value: " + selectedCode);
  dom.byId("schoolNote").innerHTML = "";
        function errorHandler(err){
          console.log("error on populate Dropdown, queryTask, error: " + err.details);