Google Appmaker PeopleViewer模板：扩展职位+姓名搜索功能的方法

Hey there! Let’s work through your PeopleViewer search customization needs step by step—fixing the autocomplete issue, verifying your variable setup, and exploring alternative approaches.

The reason your autocomplete isn’t showing the PrimaryOrganizationTitle field is likely twofold: either the field isn’t registered as a query parameter in your userInfoDs data source, or the autocomplete component isn’t linked to this parameter. Here’s how to resolve it:

1. Register the Parameter in Your Data Source
   First, ensure PrimaryOrganizationTitle is defined as a query parameter for userInfoDs. If you’re using a code-first approach, add this snippet to initialize the parameter:

   // Add PrimaryOrganizationTitle to query parameters if it doesn't exist
   if (!userInfoDs.query.parameters.PrimaryOrganizationTitle) {
       userInfoDs.query.parameters.PrimaryOrganizationTitle = {
           type: "string",
           displayName: "Primary Organization Title"
       };
   }
   

   If you’re using a visual designer, navigate to your data source’s settings and add PrimaryOrganizationTitle as a new query parameter with a string type.

2. Link the Autocomplete Component
   Configure your autocomplete UI element to pull suggestions from the PrimaryOrganizationTitle field. For example, if using a lookup component, set its data source to fetch distinct values of PrimaryOrganizationTitle from your user dataset. This tells the autocomplete where to get its suggestion list.

Your current line var title = userInfoDs.query.parameters.PrimaryOrganizationTitle; is grabbing the parameter object itself, not the actual input value the user entered. To get the search term, you need to access the value property of the parameter:

var title = userInfoDs.query.parameters.PrimaryOrganizationTitle?.value;

The optional chaining (?.) prevents errors if the parameter hasn’t been initialized yet. Then you can apply this to your filter correctly:

// Apply the filter only if there's a title value
if (title) {
    userInfoDs.query.filters.PrimaryOrganizationTitle = title;
} else {
    // Clear the filter when the input is empty
    delete userInfoDs.query.filters.PrimaryOrganizationTitle;
}

If you want more flexibility for your combined name and title search, here are a couple of solid alternatives:

1. Single Combined Search Input (OR Logic)
   Create one search box that checks both the user’s name and their primary organization title. This is great for users who want to enter a single term that matches either field:

   var searchTerm = userInfoDs.query.parameters.CombinedSearch?.value;
   if (searchTerm) {
       userInfoDs.query.filters.$and = [
           {
               $or: [
                   { FullName: { $contains: searchTerm } },
                   { PrimaryOrganizationTitle: { $contains: searchTerm } }
               ]
           }
       ];
   } else {
       delete userInfoDs.query.filters.$and;
   }
   

   You’ll need to add a CombinedSearch string parameter to userInfoDs for this approach, then link it to your single search input.

2. Custom Fetch Function for Full Control
   If you need complex filtering logic or are working with an external API, override the data source’s fetch function to handle search manually:

   userInfoDs.fetch = function() {
       const title = this.query.parameters.PrimaryOrganizationTitle?.value;
       const name = this.query.parameters.FullName?.value;
       
       // Build your custom filter object
       const filter = {};
       if (title) filter.PrimaryOrganizationTitle = { $contains: title };
       if (name) filter.FullName = { $contains: name };
       
       // Fetch and load data with your custom filter
       return fetch('/api/users', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ filter })
       })
       .then(res => res.json())
       .then(data => this.load(data));
   };
   

内容的提问来源于stack exchange，提问作者aymeric vdt