How can I make my layer search result more user accessible and simpler to use?

Question

I am creating a web application for electoral results in my country with a Layer Search. Currently when I search the map, for a candidate or a constituency the results come up in a pop up template but I would like it to show the candidates name under the constituency in the results table. Eg. If I am to search for James I would want it to bring up in the results table, St. Thomas Eastern as a button and then the line below with the name James Robertson so it can be aesthetic and user accessible. Is this possible?

So I would like the candidate name under the place they are located in this case, St. Thomas Western.

Here are som samples of the code I am working with or you can visit my codepen at https://codepen.io/chesouye/pen/VwgqXEm.

ps://codepen.io/chesouye/pen/VwgqXEm

 graphicLayerSearch = new GraphicsLayer();

   //MAP INSTANCE
    map = new Map({
        basemap: "topo-vector",
        layers: [featureLayer, parish, graphicLayerSearch],//[ resultsLabelLayer,  graphicLayerSearch ],
        logo: false
      });

    //MAP VIEW OPTIONS
     view = new MapView({
        container: "map",
        map: map,
        zoom: 10,
        center: [-77.2627, 18.0927]
      });


 toggleLoading();
           var searchType = $('input[name="typer"]:checked').val();
          var searchString = stringFix($('#top-band-search').val().trim());
          var queryTask = new QueryTask({url: "https://services6.arcgis.com/3R3y1KXaPJ9BFnsU/arcgis/rest/services/GE_2020/FeatureServer/41"});
          var query = new Query();
          query.returnGeometry = true;
          query.outFields = ["*"];
          if(searchType === "cons"){
            query.where = "CONST LIKE '%"+searchString+"%'";
          }else{
            query.where = "JLP_CAN_1 LIKE '%"+searchString+"%' OR "
                         +"PNP_CAND LIKE '%"+searchString+"%' OR "
                         +"IND_A_CAN LIKE '%"+searchString+"%' OR "
                         +"INDB_CAND LIKE '%"+searchString+"%' OR "
                         +"INDC_CAND LIKE '%"+searchString+"%'";
          }
          query.outSpatialReference = view.extent.spatialReference;

            if(!searchString){
                if(detectIE() === -1){
                    //modalWindow.text = 'Please enter some text to search for';
                    //modalWindow.makeModal();
                }else{
                    alert('Please enter some text to search for');
                }
                $('#top-band-search').addClass('focus-error');
                $('#top-band-search').focus();
                toggleLoading();
            return false;
            }
           // When resolved, returns features and graphics that satisfy the query.
          queryTask.execute(query).then(function(results){
             var count = results.features.length;
             var resultsArray = results.features;
             graphicsArray = [];
             var resultsContainer = $('#data-search-results-container');
             var state = resultsContainer.attr('isOpen');

              if(state === 'true'){
                  var string = (count === 63)?"....":searchString;
                    $('#data-search-results-info')
                        .html("Found <b>" + count + "</b> results matching <br> <center><b>\"" + string + "\"</b></center>");
                        resultsContainer.attr('isOpen', true);
             }else{
                resultsContainer.animate({left: "0px"}, 1000,
                 function(){
                     var string = (count === 63)?"....":searchString;
                    $('#data-search-results-info')
                        .html("Found <b>" + count + "</b> results matching <br> <center><b>\"" + string + "\"</b></center>");
                        resultsContainer.attr('isOpen', true);

                     });
             }

var listContainer = $('#data-search-results-list ul');
                    listContainer.empty();
                    for(var i = 0; i < resultsArray.length; i++){
                        var feature = resultsArray[i];
                        var geo = feature.geometry;
                        var attr = feature.attributes;
                        
                        // Add the geometry and symbol to a new graphic
                         var polygonGraphic = new Graphic({
                                                id: i,
                                                geometry: geo,
                                                symbol: fillSymbol,
                                                attributes: attr,
                                                popupTemplate: new PopupTemplate({title:"{CONST}",content: popTemplate}),
                                                layer: graphicLayerSearch
                                              });
                                              console.log(attr);
                        graphicsArray.push(polygonGraphic);
                        listContainer.append(listItem(i,attr));
                        dataArray[i] = attr;
                        formatPopup(attr);
                    }

                    addGraphics(view,graphicsArray);
                    punchQuerySite(searchString);
              }).catch(function(error){
                  console.log(error);
              });

Answer 1

Like your previous question, this one is also not GIS related but purely HTML/JS related one. I'll answer it, but please in the future post this kind of questions to the StackOveflow site.

Existing function candidateListItem can be used to display candidates names, but has to be slightly modified, since it uses wrong data attribute names, is case sensitive and returns only one name even when more than one name matches the search string.

Relevant part of the code could then look something like this:

function candidateListItem(index, data, needle) {
  var item = "<li id='"+index+"'><b>" + data.CONST_NAME + '</b>';
  var names = returnCandidateNames(data, needle);
  names.forEach(function(name) {
    item += "<br> - " + name;
  });
  item += "</li>";
  return item;
}

function returnCandidateNames(data, needle){
  var names = [];
  if (data.PNP_CAND.search(new RegExp(needle, "i")) >= 0)
    names.push(data.PNP_CAND);
  if (data.JLP_CAN_1.search(new RegExp(needle, "i")) >= 0)
    names.push(data.JLP_CAN_1);
  if (data.IND_A_CAN && data.IND_A_CAN.search(new RegExp(needle, "i")) >= 0)
    names.push(data.IND_A_CAN);
  if (data.INDB_CAND && data.INDB_CAND.search(new RegExp(needle, "i")) >= 0)
    names.push(data.INDB_CAND);
  if (data.INDC_CAND && data.INDC_CAND.search(new RegExp(needle, "i")) >= 0)
    names.push(data.INDC_CAND);
  return names;
}

for (var i = 0; i < resultsArray.length; i++) {
  var feature = resultsArray[i];
  var geo = feature.geometry;
  var attr = feature.attributes;
  
   var polygonGraphic = new Graphic({
    id: i,
    geometry: geo,
    symbol: fillSymbol,
    attributes: attr,
    popupTemplate: new PopupTemplate({title:"{CONST}",content: popTemplate}),
    layer: graphicLayerSearch
  });
  console.log(attr);
  graphicsArray.push(polygonGraphic);
  listContainer.append(candidateListItem(i, attr, searchString));
  dataArray[i] = attr;
  formatPopup(attr);
}

That's how the result looks like then: