SOLVED: SPO filter results to display 'Title' field values while filtering page wps from another field in same list

https://sharepoint.stackexchange.com/questions/274578

08-02-2021
|

Question

I want my autocomplete filter to display the search results based on the Companies list item's Title field while filtering the page's WPs based on another field in the Companies list. I am working with the following lists (see image below). I cannot get this working -- any help or guidance would be appreciated!

List view WP "Companies" [cols: ID, Title, CiqId]
Document Library view WP "SourcesLibrary" [cols: CompanyId, CiqId] (!)

(!) CompanyId is a text field populated by Companies list,'Title' field
(!) CiqId is a text field populated by Companies list, 'CiqId' field

The Filter I have an HTML WP filter whose autosuggest results are populated by the "Companies" list 'Title' field. This is working properly. What I can't figure out is how to use this filter to filter the page web parts based on the 'CiqId' field while still displaying the 'Title' field values as search results. I;ve included the script for this filter at the bottom of the post.

Use-Case When the term "3M" is entered into the HTML Form WP filter, the value "3M" is displayed in the filter's dropdown results while the list view and library WPs are filtered by the value "D", as that is the value in the item's 'CiqId' field. This results in the list view and library WPs showing all items and documents matching the 'CiqId' value "D", which would include "3M" and "Post-it".

Right now, my filter displays the Title field as search results and filters the page's WPs based on that value as well.

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- css -->
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet" >
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" >
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<link href=//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<!-- js -->
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="preloader" class="spinner"></div>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{   
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>Companies</listName><viewFields><ViewFields><FieldRef Name='Title'/> </ViewFields></viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>";
    //Make a call to the List WebService using the SOAP envelope described above.
    //The URL is fixed to a Specific Site Root.  Feel free to change this
    //to your own fixed root or do some jscript voodoo to figure out where
    //Of course in 2010 you can do this with the Client Object Model, or hit
    //the list rest Service and return json, so enabling jsonp cross site calls.
    $.ajax({
        url: "https://birchbox.sharepoint.com/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv, 
contentType: "text/xml; charset=\"utf-8\"",
success:  function( xmlResponse )         { 
var domElementArray=$( "z\\:row", xmlResponse ); 
   var dataMap = domElementArray.map(function() 
   {     
   return { 
   value: $(this).attr('ows_Title') , 
   id: $(this).attr('ows_Title') 
   }; 
   });  
            var data = dataMap.get(); 

            //Find the Sharepoint Portal Search Box (this is a poor selector, but it is not properly named by sharepoint, well it is but INamingContainer gets in the way)    
           $( "#tags2" ).autocomplete(    
            {                 source: data  
            });
            }     

            });//.ajax   

             });//docReady 

      </script>
<div id="gobuttons2">
<div class="ui-widget"></div>
<div class="input-group mb-3" onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<input id="tags2" name="tags2" input type="text" class="form-control" placeholder="Type a company name and click 🔍" aria-label="Type a company name and click 🔍" onchange="javascript:_SFSUBMIT_"/>
    <div class="input-group-append">
<button type="submit" class="btn btn-outline-danger btn-sm" onclick="javascript:_SFSUBMIT_"><i class="fa fa-search"></i></button>
<button type="button" class="btn btn-outline-dark btn-sm" onclick="javascript:_SFRESET_"><i class="fa fa-refresh"></i></button>
<button type="button" href="#" class="btn btn-outline-dark btn-sm" onclick="tags2.value=''"><i class="fa fa-eraser"></i></button>
</div></div></div>
</body>
</html>

Solution

I was able to get an answer for this issue. Hope this helps someone.

<!-- css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet" >
    <link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" >
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
    <!-- js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


    <script type="text/javascript">
    $(document).ready(function()
    { 
    var filterurl;
    var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>Companies</listName><viewFields><ViewFields><FieldRef Name='Title'/> </ViewFields></viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>";
//Make a call to the List WebService using the SOAP envelope described above.
//The URL is fixed to a Specific Site Root.  Feel free to change this
//to your own fixed root or do some jscript voodoo to figure out where
//Of course in 2010 you can do this with the Client Object Model, or hit
//the list rest Service and return json, so enabling jsonp cross site calls.
$.ajax({
url: "https://yourdomain.sharepoint.com/_vti_bin/lists.asmx",
    type: "POST",
    dataType: "xml",
    data: soapEnv, 
    contentType: "text/xml; charset=\"utf-8\"",
    success:  function( xmlResponse )         { 
    var domElementArray=$( "z\\:row", xmlResponse ); 
    console.log(domElementArray);
       var dataMap = domElementArray.map(function() 
       {     
       return { 
       value: $(this).attr('ows_Title') , 
       id: $(this).attr('ows_CIQID') 
       }; 
       });  
                var data = dataMap.get(); 
                console.log(data);
                //Find the Sharepoint Portal Search Box (this is a poor selector, but it is not properly named by sharepoint, well it is but INamingContainer gets in the way)    
               $( "#tags2" ).autocomplete(    
                {   
                    source: data  
                });
                }     

                });//.ajax   

                 });//docReady 
        function getCipIdbyTitle()
        {
          var title=$("input[name='tags2']").val();
            $.ajax({
                url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Companies')/items?$filter=Title eq '"+ title +"'",
                type: "GET",
                contentType: "application/json;odata=verbose",
                headers: {
                    "Accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                }
                }).done(function(data)
                       {
                         console.log(data.d.results[0].CIQID);
                         filterurl="https://yourdomain.sharepoint.com/Pages/company.aspx" + "?FilterField1=CIQID&FilterValue1="+data.d.results[0].CIQID;
                         window.location.replace(filterurl);

                      }).fail(function(xhr,status,error){
                         console.log(Json.stringify(error));
               });
        }
                  </script>
    <div id="preloader" class="spinner"></div>
    <div id="gobuttons2">
    <div class="ui-widget"></div>
    <div class="input-group mb-3" onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <input id="tags2" name="tags2" input type="text" class="form-control" placeholder="Type a company name and click 🔍" aria-label="Type a company name and click 🔍" onchange="javascript:_SFSUBMIT_"/>
        <div class="input-group-append">
    <button type="submit" class="btn btn-outline-danger btn-sm" onclick="getCipIdbyTitle()"><i class="fa fa-search"></i></button>
    <button type="button" class="btn btn-outline-dark btn-sm" onclick="javascript:_SFRESET_"><i class="fa fa-refresh"></i></button>
    <button type="button" href="#" class="btn btn-outline-dark btn-sm" onclick="tags2.value=''"><i class="fa fa-eraser"></i></button>
    </div></div></div>

Licensed under: CC-BY-SA with attribution

Not affiliated with sharepoint.stackexchange