How to customize Search Widget to show feature pop-up?

[Anonymous User]

Hey Team!

What I'm trying to do is fairly straight forward (conceptually), but I'm unsure about how to put it into practice. 

If you go to a Web Map or App (ArcGIS Web Application) and use the Search Widget to find an address (2003 Union St), you'll get a pop-up that just identifies the location. I'm looking for the functionality of: a user searches for 2003 Union St (or whatever street) and the pop-up returned corresponds to the Parcel feature. 

Some of the concepts were touched here: Configure Popup for Search Results and here: Program search widget to pop up window from intersecting polygon layer , but there was no answer that addressed how to modify the Search Widget code to achieve this functionality. 

Any help is much appreciated!

[RobertScheitlin__GISP]

Sorry didn't mean that to sound rude.

[Anonymous User]

No you're totally right -- was being a little sloppy  

So the three changes I should make are:

1. Change the Search widget config file to showInfoWidgetOnSelect to 'false'
2. Append the first code sample to the _onSelectResult in the widget.js file
   1. Should be around line ~744
3. Append the second code sample to the _onSearchResults in the widget.js file
   1. Should be around line ~628

ArcGIS Web Application seems to still be throwing the error.

If you're cool inspecting my widget.js file, I have it attached here (hopefully that works!). Thanks for all the help!

[RobertScheitlin__GISP]

Andrew,

   So you just need some error checking in the _onSearchResults: function(evt) {

        if (results && evt.numResults > 0) {
          var mpPt;
          if(results[0][0].feature.geometry.type === "point"){
            mpPt = results[0][0].feature.geometry;
          }else{
            mpPt = results[0][0].feature.geometry.getExtent().getCenter();
          }
          var scrPt = this.map.toScreen(mpPt);
          this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });
        }‍‍‍‍‍‍‍‍‍‍

[Anonymous User]

Hmmmm, still getting the same error: ArcGIS Web Application  

      _onSearchResults: function(evt) {
        var sources = this.searchDijit.get('sources');
        var activeSourceIndex = this.searchDijit.get('activeSourceIndex');
        var value = this.searchDijit.get('value');
        var htmlContent = "";
        var results = evt.results;
        var _activeSourceNumber = null;
        if (results && evt.numResults > 0) {
          html.removeClass(this.searchDijit.containerNode, 'showSuggestions');

          this.searchResults = results;
          htmlContent += '<div class="show-all-results jimu-ellipsis" title="' +
            this.nls.showAll + '">' +
            this.nls.showAllResults + '<strong >' + value + '</strong></div>';
          htmlContent += '<div class="searchMenu" role="menu">';
          for (var i in results) {
            if (results[i] && results[i].length) {
              var name = sources[parseInt(i, 10)].name;
              if (sources.length > 1 && activeSourceIndex === 'all') {
                htmlContent += '<div title="' + name + '" class="menuHeader">' + name + '</div>';
              }
              htmlContent += "<ul>";
              var partialMatch = value;
              var r = new RegExp("(" + partialMatch + ")", "gi");
              var maxResults = sources[i].maxResults;

              for (var j = 0, len = results[i].length; j < len && j < maxResults; j++) {
                var text = esriLang.isDefined(results[i][j].name) ?
                  results[i][j].name : this.nls.untitled;

                htmlContent += '<li title="' + text + '" data-index="' + j +
                  '" data-source-index="' + i + '" role="menuitem" tabindex="0">' +
                  text.toString().replace(r, "<strong >$1</strong>") + '</li>';
              }
              htmlContent += '</url>';

              if (evt.numResults === 1) {
                _activeSourceNumber = i;
              }
            }
          }
          htmlContent += "</div>";
          this.searchResultsNode.innerHTML = htmlContent;

          this._showResultMenu();

          this._resetSelectorPosition('.searchMenu');
        } else {
          this._onClearSearch();
        }
        // publish search results to other widgets
        this.publishData({
          'searchResults': evt
        });
        if (results && evt.numResults > 0) {
          var mpPt;
          if(results[0][0].feature.geometry.type === "point"){
            mpPt = results[0][0].feature.geometry;
          }else{
            mpPt = results[0][0].feature.geometry.getExtent().getCenter();
          }
          var scrPt = this.map.toScreen(mpPt);
          this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });
        }
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Still getting this error: 

[RobertScheitlin__GISP · Accepted solution]

Andrew,

   OK, I see that is your case the first result returned in the results is not zero all the time. Here is the updated code then for the _onSearchResults: function(evt) {

        if (results && evt.numResults > 0) {
          var mpPt;
          for (var i in results) {
            if(results[i][0].feature.geometry.type === "point"){
              mpPt = results[i][0].feature.geometry;
            }else{
              mpPt = results[i][0].feature.geometry.getExtent().getCenter();
            }
            var scrPt = this.map.toScreen(mpPt);
            this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt ,screenPoint: scrPt });
            break;
          }
        }‍‍‍‍‍‍‍‍‍‍‍‍‍

[Anonymous User]

Huzzah! We have it sort-of working even better.

ArcGIS Web Application  

When invoking the search widget, it now will go to the location and display the default pop-up, but if you click the search icon again, it will execute properly. Any ideas on that one? 

[AmyRoust]

I appreciate the two of you going through this because I was able to copy those changes and make it work on my web app!

I do have a follow-up question: the pop-up from the layer only appears if I get a hit from the first geocoder in my Search widget. Is there a way to tweak the code so that it will also display the layer pop-up if the search results come from the second or third geocoders in my list?

[RobertScheitlin__GISP]

Amy,

   Sorry I have to guidance on that.

[RobertScheitlin__GISP]

Andrew,

   Your app still has: 

"showInfoWindowOnSelect": true,
When it is suppose to be false.

[Anonymous User]

Does that exist somewhere else besides the app's config.json that should be edited? I have that set to false in 

D:\applications\VirtChar\VirtChar\InDevelopment\Beta\widgets\Search\config.json