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>
</div>
event listener
on(dom.byId("txtSchool"), "keydown", function(evt){
switch (evt.keyCode){
case keys.ENTER:
var tbVal = evt.target.value
console.log("You entered: " + tbVal );
mySchoolSelect.createSelect(tbVal,app.pointLayer);
break;
default:
}
});mySchoolSelect.js that executes
define ([
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/_base/array",
"dijit/registry",
"dojo/store/Memory",
"dijit/form/FilteringSelect",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/FindParameters",
"esri/tasks/FindTask"
], function (
on,dom,domConstruct, domClass, arrayUtils, registry,Memory,FilteringSelect,Query,QueryTask,
FindParameters,FindTask
) {
return {
createSelect: function(tbVal,pointLayer){
domConstruct.empty('schoolSearchDiv');
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;
findTask.execute(findParams).then(function(results){
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;
selectList.push({
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");
mySelect.startup();
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);
}
}
}
});
