Merge pull request #251317 from diberry/diberry/0912-search-materialui-updates

Search - Add search to website - updates - JS

Author: JamesJBarnett

articles/search/tutorial-javascript-create-load-index.md

@@ -7,7 +7,7 @@ author: diberry
 ms.author: diberry
 ms.service: cognitive-search
 ms.topic: tutorial
-ms.date: 08/29/2023
+ms.date: 09/13/2023
 ms.custom: devx-track-js, devx-track-azurecli, devx-track-azurepowershell
 ms.devlang: javascript
 ---
@@ -18,7 +18,7 @@ Continue to build your search-enabled website by following these steps:
 
 * Create a search resource
 * Create a new index
-* Import data with JavaScript using the [bulk_insert_books script](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/main/search-website-functions-v4/bulk-insert-v4/bulk_insert_books.js) and Azure SDK [@azure/search-documents](https://www.npmjs.com/package/@azure/search-documents).
+* Import data with JavaScript using the [bulk_insert_books script](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/main/search-website-functions-v4/bulk-insert/bulk_insert_books.js) and Azure SDK [@azure/search-documents](https://www.npmjs.com/package/@azure/search-documents).
 
 ## Create an Azure Cognitive Search resource
 
@@ -31,22 +31,22 @@ The ESM script uses the Azure SDK for Cognitive Search:
 * [npm package @azure/search-documents](https://www.npmjs.com/package/@azure/search-documents)
 * [Reference Documentation](/javascript/api/overview/azure/search-documents-readme)
 
-1. In Visual Studio Code, open the `bulk_insert_books.js` file in the subdirectory,  `search-website-functions-v4/bulk-insert-v4`, replace the following variables with your own values to authenticate with the Azure Search SDK:
+1. In Visual Studio Code, open the `bulk_insert_books.js` file in the subdirectory,  `search-website-functions-v4/bulk-insert`, replace the following variables with your own values to authenticate with the Azure Search SDK:
 
     * YOUR-SEARCH-RESOURCE-NAME
     * YOUR-SEARCH-ADMIN-KEY
 
-    :::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/bulk-insert-v4/bulk_insert_books.js" :::
+    :::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/bulk-insert/bulk_insert_books.js" :::
 
-1. Open an integrated terminal in Visual Studio for the project directory's subdirectory, `search-website-functions-v4/bulk-insert-v4`, and run the following command to install the dependencies. 
+1. Open an integrated terminal in Visual Studio for the project directory's subdirectory, `search-website-functions-v4/bulk-insert`, and run the following command to install the dependencies. 
 
     ```bash
     npm install 
     ```
 
 ## Run the bulk import script for Search
 
-1. Continue using the integrated terminal in Visual Studio for the project directory's subdirectory, `search-website-functions-v4/bulk-insert-v4`, to run the following bash command to run the `bulk_insert_books.js` script:
+1. Continue using the integrated terminal in Visual Studio for the project directory's subdirectory, `search-website-functions-v4/bulk-insert`, to run the `bulk_insert_books.js` script:
 
     ```javascript
     npm start

articles/search/tutorial-javascript-deploy-static-web-app.md

@@ -7,7 +7,7 @@ author: diberry
 ms.author: diberry
 ms.service: cognitive-search
 ms.topic: tutorial
-ms.date: 08/29/2023
+ms.date: 09/13/2023
 ms.custom: devx-track-js
 ms.devlang: javascript
 ---

articles/search/tutorial-javascript-overview.md

@@ -7,7 +7,7 @@ author: diberry
 ms.author: diberry
 ms.service: cognitive-search
 ms.topic: tutorial
-ms.date: 08/29/2023
+ms.date: 09/13/2023
 ms.custom: devx-track-js
 ms.devlang: javascript
 ---
@@ -30,9 +30,9 @@ The [sample](https://github.com/Azure-Samples/azure-search-javascript-samples/tr
 
 |App|Purpose|GitHub<br>Repository<br>Location|
 |--|--|--|
-|Client|React app (presentation layer) to display books, with search. It calls the Azure Function app. |[/search-website-functions-v4/client-v4](https://github.com/Azure-Samples/azure-search-javascript-samples/tree/master/search-website-functions-v4/client-v4)|
-|Server|Azure Function app (business layer) - calls the Azure Cognitive Search API using JavaScript SDK |[/search-website-functions-v4/api-v4](https://github.com/Azure-Samples/azure-search-javascript-samples/tree/master/search-website-functions-v4/api-v4)|
-|Bulk insert|JavaScript file to create the index and add documents to it.|[/search-website-functions-v4/bulk-insert-v4](https://github.com/Azure-Samples/azure-search-javascript-samples/tree/master/search-website-functions-v4/bulk-insert-v4)|
+|Client|React app (presentation layer) to display books, with search. It calls the Azure Function app. |[/search-website-functions-v4/client](https://github.com/Azure-Samples/azure-search-javascript-samples/tree/master/search-website-functions-v4/client)|
+|Server|Azure Function app (business layer) - calls the Azure Cognitive Search API using JavaScript SDK |[/search-website-functions-v4/api](https://github.com/Azure-Samples/azure-search-javascript-samples/tree/master/search-website-functions-v4/api)|
+|Bulk insert|JavaScript file to create the index and add documents to it.|[/search-website-functions-v4/bulk-insert](https://github.com/Azure-Samples/azure-search-javascript-samples/tree/master/search-website-functions-v4/bulk-insert)|
 
 ## Set up your development environment
 

articles/search/tutorial-javascript-search-query-integration.md

@@ -7,7 +7,7 @@ author: diberry
 ms.author: diberry
 ms.service: cognitive-search
 ms.topic: tutorial
-ms.date: 08/29/2023
+ms.date: 09/13/2023
 ms.custom: devx-track-js
 ms.devlang: javascript
 ---
@@ -29,47 +29,69 @@ The Function app authenticates through the SDK to the cloud-based Cognitive Sear
 
 ## Configure secrets in a configuration file
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api-v4/src/lib/config.js":::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api/src/lib/config.js":::
 
 ## Azure Function: Search the catalog
 
-The [Search API](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/api-v4/src/functions/search.js) takes a search term and searches across the documents in the search index, returning a list of matches. 
+The [Search API](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/api/src/functions/search.js) takes a search term and searches across the documents in the search index, returning a list of matches. 
 
 The Azure Function pulls in the search configuration information, and fulfills the query.
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api-v4/src/functions/search.js" :::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api/src/functions/search.js" :::
 
 ## Client: Search from the catalog
 
 Call the Azure Function in the React client with the following code. 
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client-v4/src/pages/Search/Search.js" highlight="41-52" :::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client/src/pages/Search.js" highlight="88-100" :::
+
+## Client: Facets from the catalog
+
+This React component includes the search textbox and the [**facets**](search-faceted-navigation.md) associated with the search results. Facets need to be thought out and designed as part of the search schema when the search data is loaded. Then the facets are used in the search query, along with the search text, to provide the faceted navigation experience. 
+
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client/src/components/Facets/Facets.js" highlight="49-76" :::
+
+## Client: Pagination from the catalog
+
+When the search results expand beyond a trivial few (8), the `@mui/material/TablePagination` component provides **pagination** across the results.
+
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client/src/components/Pager.js" highlight="27" :::
+
+When the user changes the page, that value is sent to the parent `Search.js` page from the `handleChangePage` function. The function sends a new request to the search API for the same query and the new page. The API response updates the facets, results, and pager components.
 
 ## Azure Function: Suggestions from the catalog
 
-The [Suggest API](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/api-v4/src/functions/suggest.js) takes a search term while a user is typing and suggests search terms such as book titles and authors across the documents in the search index, returning a small list of matches. 
+The [Suggest API](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/api/src/functions/suggest.js) takes a search term while a user is typing and suggests search terms such as book titles and authors across the documents in the search index, returning a small list of matches. 
 
-The search suggester, `sg`, is defined in the [schema file](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/bulk-insert-v4/good-books-index.json) used during bulk upload.
+The search suggester, `sg`, is defined in the [schema file](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/bulk-insert/good-books-index.json) used during bulk upload.
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api-v4/src/functions/suggest.js" :::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api/src/functions/suggest.js" :::
 
 ## Client: Suggestions from the catalog
 
 The Suggest function API is called in the React app at `\src\components\SearchBar\SearchBar.js` as part of component initialization:
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client-v4/src/components/SearchBar/SearchBar.js" highlight="52-60" :::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client/src/components/SearchBar.js" highlight="40-55, 75-117" :::
+
+This React component uses the `@mui/material/Autocomplete` component to provide a search textbox, which also supports displaying suggestions (using the `renderInput` function). Autocomplete starts after the first several characters are entered. As each new character is entered, it's sent as a query to the search engine. The results are displayed as a short list of suggestions.
+
+This autocomplete functionality is a common feature but this specific implementation has an additional use case. The customer can enter text and select from the suggestions _or_ submit their entered text. The input from the suggestion list as well as the input from the textbox must be tracked for changes, which impact how the form is rendered and what is sent to the **search** API when the form is submitted.
+
+If your use case for search allows your user to select only from the suggestions, that will reduce the scope of complexity of the control but limit the user experience. 
 
 ## Azure Function: Get specific document 
 
-The [Lookup API](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/api-v4/src/functions/lookup.js) takes an ID and returns the document object from the search index. 
+The [Lookup API](https://github.com/Azure-Samples/azure-search-javascript-samples/blob/master/search-website-functions-v4/api/src/functions/lookup.js) takes an ID and returns the document object from the search index. 
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api-v4/src/functions/lookup.js" :::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/api/src/functions/lookup.js" :::
 
 ## Client: Get specific document 
 
 This function API is called in the React app at `\src\pages\Details\Detail.js` as part of component initialization:
 
-:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client-v4/src/pages/Details/Details.js" highlight="20-30" :::
+:::code language="javascript" source="~/azure-search-javascript-samples/search-website-functions-v4/client/src/pages/Details.js" highlight="17-21,28" :::
+
+If your client app can use pregenerated content, this page is a good candidate for autogeneration because the content is static, pulled directly from the search index.
 
 ## Next steps