Query Automatically

JaredPilbeam2

This app works fine as it is. You select from one or both of the drop-downs and then hit the "Search" button to start the search. But, I've been requested to have the search happen automatically as you select from the drop-down (i.e. without hitting the search button). Basically, I'd like to mimic the search from this website: Will County EEC Mobile Site. What would I have to change to do this?

I've been studying this sample code because the query for the "Well Type" does what I'm wanting: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html. But, I can't grasp it.

Here is the functioning JS. And here is the whole app on Code Pen.

<SPAN class="comment token">// JavaScript source code</SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
    <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/widgets/Home"</SPAN><SPAN class="punctuation token">,</SPAN>
    <SPAN class="string token">"esri/widgets/Expand"</SPAN>
    
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
    Map<SPAN class="punctuation token">,</SPAN>
    MapView<SPAN class="punctuation token">,</SPAN>
    FeatureLayer<SPAN class="punctuation token">,</SPAN>
    GraphicsLayer<SPAN class="punctuation token">,</SPAN>
    Search<SPAN class="punctuation token">,</SPAN>
    Home<SPAN class="punctuation token">,</SPAN>
    Expand
    
        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> catTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"category"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> keyTypeSelect <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"keyword"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> filterButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"filterBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> resRb <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ResidentialRB"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">//***popups***</SPAN>
            <SPAN class="comment token">//popup template</SPAN>
            <SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//autocasts the new template</SPAN>
        title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<font size='2.75px'><b>{USER_Name}</b>"</SPAN><SPAN class="punctuation token">,</SPAN>
                content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
                    <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="comment token">// You can also set a descriptive text element</SPAN>
                        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// TextContentElement</SPAN>
                        text<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<font color='#1c9c52'><b>{Description}</b>"</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//set content elements in the order to display</SPAN>
        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><SPAN class="punctuation token">,</SPAN>
                        fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Addre"</SPAN><SPAN class="punctuation token">,</SPAN>
                            label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Address"</SPAN><SPAN class="punctuation token">,</SPAN>
                            visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="punctuation token">{</SPAN>
        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_City"</SPAN><SPAN class="punctuation token">,</SPAN>
                            label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"City"</SPAN><SPAN class="punctuation token">,</SPAN>
                            visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="punctuation token">{</SPAN>
                                fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Zip"</SPAN><SPAN class="punctuation token">,</SPAN>
                                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Zip Code"</SPAN><SPAN class="punctuation token">,</SPAN>
                                visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        <SPAN class="punctuation token">{</SPAN>
        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Phone"</SPAN><SPAN class="punctuation token">,</SPAN>
                            label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">" Phone"</SPAN><SPAN class="punctuation token">,</SPAN>
                            visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="punctuation token">{</SPAN>
        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Link"</SPAN><SPAN class="punctuation token">,</SPAN>
                                label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Website"</SPAN><SPAN class="punctuation token">,</SPAN>
                                visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        <SPAN class="punctuation token">{</SPAN>
        fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"USER_Notes"</SPAN><SPAN class="punctuation token">,</SPAN>
                            label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Extra Notes"</SPAN><SPAN class="punctuation token">,</SPAN>
                            visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">]</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// Recycle Layer</SPAN>
            <SPAN class="keyword token">var</SPAN> recycleLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
                    id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"b5665da3feab4b6091914cbfe4ab028f"</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                popupTemplate<SPAN class="punctuation token">:</SPAN> template<SPAN class="punctuation token">,</SPAN>
                outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

             <SPAN class="comment token">// GraphicsLayer for displaying results</SPAN>
            <SPAN class="keyword token">var</SPAN> resultsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="comment token">//Set map view</SPAN>
            <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dark-gray"</SPAN><SPAN class="punctuation token">,</SPAN>
                layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>recycleLayer<SPAN class="punctuation token">,</SPAN> resultsLayer<SPAN class="punctuation token">]</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
                map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
                center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">88.7</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">41.8</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8.7</SPAN><SPAN class="punctuation token">,</SPAN>
                padding<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                    right<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">380</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>

                <SPAN class="comment token">//popup</SPAN>
                popup<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="comment token">//widthbreakpoint for sidebar</SPAN>
            view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"widthBreakpoint"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>newVal<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>newVal<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>newVal <SPAN class="operator token">===</SPAN> <SPAN class="string token">"medium"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">||</SPAN> newVal <SPAN class="operator token">===</SPAN> <SPAN class="string token">"small"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'sidebar'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">'none'</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                    document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'sidebar'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">'block'</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        
            <SPAN class="comment token">//***widgets***</SPAN>

            <SPAN class="comment token">////Expand instance and set content property to the div element</SPAN>
            <SPAN class="comment token">//var bgExpand = new Expand({</SPAN>
            <SPAN class="comment token">//    view: view,</SPAN>
            <SPAN class="comment token">//    content: div</SPAN>
            <SPAN class="comment token">//});</SPAN>

            <SPAN class="comment token">// // Add the expand instance to the ui</SPAN>
            <SPAN class="comment token">//view.ui.add(textExpand, "top-right");</SPAN>

            <SPAN class="comment token">//home widget</SPAN>
            <SPAN class="keyword token">var</SPAN> homeBtn <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Home</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>homeBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">//search widget</SPAN>
            <SPAN class="keyword token">const</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                view<SPAN class="punctuation token">:</SPAN> view
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="comment token">//Adds the search widget below other elements in</SPAN>
            <SPAN class="comment token">//the top left corner of the view</SPAN>
            view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
                position<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bottom-left"</SPAN><SPAN class="punctuation token">,</SPAN>
                index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>

            <SPAN class="comment token">// query all features from the recycle layer</SPAN>
            view
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getValues<SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getUniqueValues<SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>addToSelect<SPAN class="punctuation token">)</SPAN>
            <SPAN class="comment token">// re-query the layer based on the selected Category and re-populate the keyword select</SPAN>
            catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"Category LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> catTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                query<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">;</SPAN>
                recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>query<SPAN class="punctuation token">)</SPAN>
                    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getValues2<SPAN class="punctuation token">)</SPAN>
                    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getUniqueValues2<SPAN class="punctuation token">)</SPAN>
                    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>addToSelect2<SPAN class="punctuation token">)</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="comment token">// return an array of all the values in the</SPAN>
            <SPAN class="comment token">// Category and item_keyword fields of the Recycle layer</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getValues</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> features <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> values <SPAN class="operator token">=</SPAN> features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
            Category<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Category<SPAN class="punctuation token">,</SPAN>
            item_keyword<SPAN class="punctuation token">:</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>item_keyword
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">return</SPAN> values<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="comment token">// re-query the layer based on the selected Category and re-populate the keyword select</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getValues2</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> features <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> values <SPAN class="operator token">=</SPAN> features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>item_keyword
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">return</SPAN> values<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            <SPAN class="comment token">// return an array of unique values in</SPAN>
            <SPAN class="comment token">// the item_keyword and Category fields of the Recycle layer</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getUniqueValues</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> uniqueKeyValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> uniqueCatValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

                values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> keyVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN>item_keyword<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> catVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN>Category<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    catVal<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>val1<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
                            <SPAN class="punctuation token">(</SPAN>uniqueCatValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> uniqueCatValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val1<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
                            val1 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
                        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            uniqueCatValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    keyVal<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
                            <SPAN class="punctuation token">(</SPAN>uniqueKeyValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
                            val2 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
                        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
            uKeyVals<SPAN class="punctuation token">:</SPAN> uniqueKeyValues<SPAN class="punctuation token">,</SPAN>
                    uCatVals<SPAN class="punctuation token">:</SPAN> uniqueCatValues
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="comment token">// re-query the layer based on the selected Category and re-populate the keyword select</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getUniqueValues2</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> uniqueKeyValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

                values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">,</SPAN> i<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> keyVal <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">";"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    keyVal<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>
                            <SPAN class="punctuation token">(</SPAN>uniqueKeyValues<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN>
                            val2 <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN>
                        <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            uniqueKeyValues<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>val2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">return</SPAN> uniqueKeyValues<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            <SPAN class="comment token">// Add the unique values to the recycle type</SPAN>
            <SPAN class="comment token">// select element. This will allow the user</SPAN>
            <SPAN class="comment token">// to filter categories by type.</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> dOpt <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

                dOpt<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
                catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                values<SPAN class="punctuation token">.</SPAN>uCatVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                values<SPAN class="punctuation token">.</SPAN>uCatVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
                    catTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">var</SPAN> dOpt2 <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt2<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

                dOpt2<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt2<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
                keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                values<SPAN class="punctuation token">.</SPAN>uKeyVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                values<SPAN class="punctuation token">.</SPAN>uKeyVals<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
                    keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">return</SPAN> <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
            <SPAN class="comment token">// re-query the layer based on the selected Category and re-populate the keyword select</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addToSelect2</SPAN><SPAN class="punctuation token">(</SPAN>values<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">while</SPAN> <SPAN class="punctuation token">(</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">var</SPAN> dOpt2 <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt2<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt2<SPAN class="punctuation token">.</SPAN>disabled <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt2<SPAN class="punctuation token">.</SPAN>selected <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
                dOpt2<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Select one"</SPAN><SPAN class="punctuation token">;</SPAN>
                keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>dOpt2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sort</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                values<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> option <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"option"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    option<SPAN class="punctuation token">.</SPAN>text <SPAN class="operator token">=</SPAN> value<SPAN class="punctuation token">;</SPAN>
                    keyTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            <SPAN class="comment token">// set the definition expression on the recycle</SPAN>
            <SPAN class="comment token">// layer to reflect the selection of the user</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> sqlExp <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"Category LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> catTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>catTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">===</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"item_keyword LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND item_keyword LIKE '%"</SPAN> <SPAN class="operator token">+</SPAN> keyTypeSelect<SPAN class="punctuation token">.</SPAN>options<SPAN class="punctuation token">[</SPAN>keyTypeSelect<SPAN class="punctuation token">.</SPAN>selectedIndex<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN> <SPAN class="string token">"%'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>resRb<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_IsRes = 'TRUE'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>

                <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sqlExp <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            sqlExp <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">" AND USER_IsBus = 'TRUE'"</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN>
                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sqlExp<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                recycleLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> sqlExp<SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>recycleLayer<SPAN class="punctuation token">.</SPAN>visible<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            recycleLayer<SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN>

                <SPAN class="keyword token">return</SPAN> <SPAN class="token function">queryForGeometries</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            <SPAN class="comment token">// Get all the geometries of the recycle layer</SPAN>
            <SPAN class="comment token">// the createQuery() method creates a query</SPAN>
            <SPAN class="comment token">// object that respects the definitionExpression</SPAN>
            <SPAN class="comment token">// of the layer</SPAN>
            <SPAN class="keyword token">function</SPAN> <SPAN class="token function">queryForGeometries</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">var</SPAN> rQuery <SPAN class="operator token">=</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">return</SPAN> recycleLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>rQuery<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            rGeometries <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="keyword token">return</SPAN> rGeometries<SPAN class="punctuation token">;</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            filterButton<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="token function">setDefinitionExpression</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

kenbuja

Looking at it a bit more closely, I made the following changes. Now it responds when you change either dropdown menu and click either radio button.

// JavaScript source code
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/layers/GraphicsLayer",
  "esri/widgets/Search",
  "esri/widgets/Home",
  "esri/widgets/Expand"

], function (
  Map,
  MapView,
  FeatureLayer,
  GraphicsLayer,
  Search,
  Home,
  Expand

) {
  var catTypeSelect = document.getElementById("category");
  var keyTypeSelect = document.getElementById("keyword");
  var filterButton = document.getElementById("filterBtn");
  var resRb = document.getElementById("ResidentialRB");
  var busRb = document.getElementById("BusinessRB");
  //***popups***
  //popup template
  var template = { //autocasts the new template
    title: "<font size='2.75px'><b>{USER_Name}</b>",
    content: [
      {
        // You can also set a descriptive text element
        type: "text", // TextContentElement
        text: "<font color='#1c9c52'><b>{Description}</b>"
      },
      { //set content elements in the order to display
        type: "fields",
        fieldInfos: [{
          fieldName: "USER_Addre",
          label: "Address",
          visible: true,
        },
        {
          fieldName: "USER_City",
          label: "City",
          visible: true,
        },
        {
          fieldName: "USER_Zip",
          label: "Zip Code",
          visible: true,
        },
        {
          fieldName: "USER_Phone",
          label: "<IMG class="jive_emoji" src="https://community.esri.com/images/emojis/260e.png" /> Phone",
          visible: true,
        },
        {
          fieldName: "USER_Link",
          label: "Website",
          visible: true,
        },
        {
          fieldName: "USER_Notes",
          label: "Extra Notes",
          visible: true,
        },]
      },
    ],
  };

  // Recycle Layer
  var recycleLayer = new FeatureLayer({
    portalItem: {
      // autocasts as new PortalItem()
      id: "b5665da3feab4b6091914cbfe4ab028f"
    },
    popupTemplate: template,
    outFields: ["*"],
    visible: false
  });

  // GraphicsLayer for displaying results
  var resultsLayer = new GraphicsLayer();
  //Set map view
  var map = new Map({
    basemap: "dark-gray",
    layers: [recycleLayer, resultsLayer]
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-88.7, 41.8],
    zoom: 8.7,
    padding: {
      right: 380,
    },

    //popup
    popup: {
    }
  });
  //widthbreakpoint for sidebar
  view.watch("widthBreakpoint", function (newVal) {
    console.log(newVal);
    if ((newVal === "medium") || newVal === "small") {
      document.getElementById('sidebar').style.display = 'none';
    }
    else {
      document.getElementById('sidebar').style.display = 'block';
    }
  });

  //***widgets***

  ////Expand instance and set content property to the div element
  //var bgExpand = new Expand({
  //    view: view,
  //    content: div
  //});

  // // Add the expand instance to the ui
  //view.ui.add(textExpand, "top-right");

  //home widget
  var homeBtn = new Home({
    view: view,
  });
  view.ui.add(homeBtn, "bottom-left");

  //search widget
  const searchWidget = new Search({
    view: view
  });
  //Adds the search widget below other elements in
  //the top left corner of the view
  view.ui.add(searchWidget, {
    position: "bottom-left",
    index: 2
  })

  // query all features from the recycle layer
  view
    .when(function () {
      return recycleLayer.when(function () {
        var query = recycleLayer.createQuery();
        return recycleLayer.queryFeatures(query);
      });
    })
    .then(getValues)
    .then(getUniqueValues)
    .then(addToSelect);
  // re-query the layer based on the selected Category and re-populate the keyword select
  catTypeSelect.addEventListener("change", function () {
    var sqlExp = "";
    if (catTypeSelect.selectedIndex > 0) {
      sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
    }
    var query = recycleLayer.createQuery();
    query.where = sqlExp;
    recycleLayer.queryFeatures(query)
      .then(getValues2)
      .then(getUniqueValues2)
      .then(addToSelect2);
    setDefinitionExpression();
  });

  keyTypeSelect.addEventListener("change", setDefinitionExpression);

  resRb.addEventListener("change", setDefinitionExpression);
  busRb.addEventListener('change', setDefinitionExpression);


  // return an array of all the values in the
  // Category and item_keyword fields of the Recycle layer
  function getValues(response) {
    var features = response.features;
    var values = features.map(function (feature) {
      return {
        Category: feature.attributes.Category,
        item_keyword: feature.attributes.item_keyword
      }
    });
    return values;
  }
  // re-query the layer based on the selected Category and re-populate the keyword select
  function getValues2(response) {
    var features = response.features;
    var values = features.map(function (feature) {
      return feature.attributes.item_keyword
    });
    return values;
  }

  // return an array of unique values in
  // the item_keyword and Category fields of the Recycle layer
  function getUniqueValues(values) {
    var uniqueKeyValues = [];
    var uniqueCatValues = [];

    values.forEach(function (item, i) {
      var keyVal = item.item_keyword.split(";");
      var catVal = item.Category.split(";");
      catVal.map(function (val1) {
        if (
          (uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
          val1 !== ""
        ) {
          uniqueCatValues.push(val1);
        }
      });
      keyVal.map(function (val2) {
        if (
          (uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
          val2 !== ""
        ) {
          uniqueKeyValues.push(val2);
        }
      });
    });
    return {
      uKeyVals: uniqueKeyValues,
      uCatVals: uniqueCatValues
    };
  }
  // re-query the layer based on the selected Category and re-populate the keyword select
  function getUniqueValues2(values) {
    var uniqueKeyValues = [];

    values.forEach(function (item, i) {
      var keyVal = item.split(";");
      keyVal.map(function (val2) {
        if (
          (uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
          val2 !== ""
        ) {
          uniqueKeyValues.push(val2);
        }
      });
    });
    return uniqueKeyValues;
  }

  // Add the unique values to the recycle type
  // select element. This will allow the user
  // to filter categories by type.
  function addToSelect(values) {
    var dOpt = document.createElement("option");
    dOpt.value = "";

    dOpt.selected = true;
    dOpt.text = "Select one";
    catTypeSelect.add(dOpt);
    values.uCatVals.sort();
    values.uCatVals.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      catTypeSelect.add(option);
    });

    var dOpt2 = document.createElement("option");
    dOpt2.value = "";

    dOpt2.selected = true;
    dOpt2.text = "Select one";
    keyTypeSelect.add(dOpt2);
    values.uKeyVals.sort();
    values.uKeyVals.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      keyTypeSelect.add(option);
    });

    return setDefinitionExpression();
  }
  // re-query the layer based on the selected Category and re-populate the keyword select
  function addToSelect2(values) {
    while (keyTypeSelect.options.length > 0) {
      keyTypeSelect.remove(0);
    }
    var dOpt2 = document.createElement("option");
    dOpt2.value = "";
    dOpt2.disabled = true;
    dOpt2.selected = true;
    dOpt2.text = "Select one";
    keyTypeSelect.add(dOpt2);
    values.sort();
    values.forEach(function (value) {
      var option = document.createElement("option");
      option.text = value;
      keyTypeSelect.add(option);
    });
    return true
  }

  // set the definition expression on the recycle
  // layer to reflect the selection of the user
  function setDefinitionExpression() {
    var sqlExp = "";
    if (catTypeSelect.selectedIndex > 0) {
      sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
    }
    if (keyTypeSelect.selectedIndex > 0) {
      if (sqlExp === "") {
        sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
      } else {
        sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
      }
    }
    if (resRb.checked) {
      if (sqlExp !== "") {
        sqlExp += " AND USER_IsRes = 'TRUE'";
      }

    } else {
      if (sqlExp !== "") {
        sqlExp += " AND USER_IsBus = 'TRUE'";
      }
    }
    console.info(sqlExp);
    recycleLayer.definitionExpression = sqlExp;

    if (!recycleLayer.visible) {
      recycleLayer.visible = true;
    }

    return queryForGeometries();
  }

  // Get all the geometries of the recycle layer
  // the createQuery() method creates a query
  // object that respects the definitionExpression
  // of the layer
  function queryForGeometries() {
    console.log('Running query');
    var rQuery = recycleLayer.createQuery();

    return recycleLayer.queryFeatures(rQuery).then(function (response) {
      rGeometries = response.features.map(function (feature) {
        return feature.geometry;
      });

      return rGeometries;
    });
  }

  filterButton.addEventListener("click", function () {
    setDefinitionExpression();
  });

});<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>