<commit_before># AzSearch.js
Automagical UI and sample react controls for [Azure Search](https://docs.microsoft.com/en-us/azure/search/) using [AzSearchStore](https://github.com/EvanBoyle/AzSearchStore). Written in [TypeScript](https://www.typescriptlang.org/).


## Live Demos

## CORS

Don't forget to enable CORS on your index. Make sure to always use a [query key](https://docs.microsoft.com/en-us/azure/search/search-query-rest-api#identify-your-azure-search-services-query-api-key).
## Quick note on data
Samples and documentation assume the real estate sample index available through the portal. A demo account is provided for the samples. To create your own service and load the real estate sample [see this guide](https://docs.microsoft.com/en-us/azure/search/search-get-started-portal).

## Contents
* [Installation](https://github.com/EvanBoyle/AzSearch.js#installation)
    * [CDN](https://github.com/EvanBoyle/AzSearch.js#cdn)
    * [NPM](https://github.com/EvanBoyle/AzSearch.js#npm)
* [Automagic](https://github.com/EvanBoyle/AzSearch.js#automagic)
    * [Basic usage](https://github.com/EvanBoyle/AzSearch.js#basic-usage)
    * [constructor](https://github.com/EvanBoyle/AzSearch.js#constructor)
    * [addSearchBox](https://github.com/EvanBoyle/AzSearch.js#addsearchbox)
    * [addResults](https://github.com/EvanBoyle/AzSearch.js#addresults)
    * [addPager](https://github.com/EvanBoyle/AzSearch.js#addpager)
    * [addRangeFacet](https://github.com/EvanBoyle/AzSearch.js#addrangefacet)
    * [addCheckboxFacet](https://github.com/EvanBoyle/AzSearch.js#addcheckboxfacet)
    * [store](https://github.com/EvanBoyle/AzSearch.js#store)
    * [Custom CSS](https://github.com/EvanBoyle/AzSearch.js#custom-css)
* [Components & Containers](https://github.com/EvanBoyle/AzSearch.js#components--containers)
* [Development](https://github.com/EvanBoyle/AzSearch.js#development)

## Installation

### CDN

```html
<!-- LINKS ARE NOTE LIVE YET -->



<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/azsearch.js/0.0.2/AzSearch.css">
<!-- Dependencies -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/react/15.5.0/react.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/react/15.5.0/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/redux/3.6.0/redux.min.js"></script>
<!-- Main -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/azsearch.js/0.0.2/AzSearch.bundle.js"></script>
```

### NPM

```
npm install azsearch.js --save
```

## Automagic

Automagic provides a set of simple APIs to generate a sample search UI. Automagic is a wrapper of [AzSearchStore](https://github.com/EvanBoyle/AzSearchStore) (for state management) and the sample react components in this repo. 

### Basic usage

```js
    // Initialize
    var automagic = new AzSearch.Automagic({ 
        index: "realestate-us-sample", 
        queryKey: "<KEY>", 
        service: "azs-playground" });

    // Add a search box on id #seachBox that uses suggester "sg", grabbing some additional 
    // fields to display during suggestions.
    automagic.addSearchBox("searchBox",
        {
            highlightPreTag: "<b>",
            highlightPostTag: "</b>",
            suggesterName: "sg",
            select: "number,street,city,region,countryCode"
        });
    // add a results view
    automagic.addResults("results");
    // Adds a pager control << 1 2 3 ... >>
    automagic.addPager("pager");
    // range facet for sqft
    automagic.addRangeFacet("sqftFacet", "sqft", "number", 0, 17000);
    // checkbox facet for numeric field beds
    automagic.addCheckboxFacet("bedsFacet", "beds", "number");
    // checkbox facet for numeric field baths
    automagic.addCheckboxFacet("bathsFacet", "baths", "number");
    // checkbox facet for string field type
    automagic.addCheckboxFacet("typeFacet", "type", "string");
    // checkbox facet for collection field tags
    automagic.addCheckboxFacet("tagsFacet", "tags", "collection");
```

### constructor
* ```constructor(config)```

Sets basic configuration to connect to service. Expects an object of type Config from AzSearchStore

```js
    // constructs and instance of Automagic
    // will also create an instance of AzSearchStore that connects to your service
    var automagic = new AzSearch.Automagic({ 
        index: "realestate-us-sample", 
        queryKey: "<KEY>", 
        service: "azs-playground" });
```

```ts
    type Config = {
        index: string;
        queryKey: string;
        service: string;
        suggestCallback?: (state: Store.SearchState, postBody: {
            [key: string]: any;
        }) => Promise<any>;
        searchCallback?: (state: Store.SearchState, postBody: {
            [key: string]: any;
        }) => Promise<any>;
    };
```

### addSearchBox
* ```addSearchBox(htmlId, suggestionsParametersUpdate, suggestionTemplate?, css?)```

Adds a input field capable of suggestions/autocomplete and executing search requests. Attaches on the specified htmlID. Optionally takes SuggestionUpdateParameters (from AzSearchStore), a [mustache template](https://mustache.github.io/mustache.5.html) to customize rendering, or css overrides. When template is not specified, a json representation of the suggestions is displayed. When specified, the mustace template is rendered against east suggestion. The content of each  suggestion can be customized by adding fields via the select parameter as shown in the example below, or by setting a 
[suggestions processor](https://github.com/EvanBoyle/AzSearchStore#client-side-results-processing) on the store.
```js
    // css class overrides
    var css = {
            searchBox__button: "searchBox__button btn btn-default",
    };
    // mustache template for custom suggestion rendering. Default displays formatted JSON
    var suggestionsTemplate = "{{displayText}} <br/> {{{searchText}}}";
    // Add a search box that uses suggester "sg", grabbing some additional fields to 
    // display during suggestions. Use the template defined above
    automagic.addSearchBox("searchBox",
        {
            highlightPreTag: "<b>",
            highlightPostTag: "</b>",
            suggesterName: "sg",
            select: "number,street,city,region,countryCode"
        },
        suggestionsTemplate,
        css);

    // Set a processor to format suggestions for display
    var suggestionsProcessor = function(results) {
        return results.map(function(result){
            result.displayText = result.number + " " + result.street+ " " +result.city+ ", " +result.region+ " " +result.countryCode;<commit_msg>fixing readme, trying to trigger cdn update<commit_after># AzSearch.js
Automagical UI and sample react controls for [Azure Search](https://docs.microsoft.com/en-us/azure/search/) using [AzSearchStore](https://github.com/EvanBoyle/AzSearchStore). Written in [TypeScript](https://www.typescriptlang.org/).


## Live Demos

## CORS

Don't forget to enable CORS on your index. Make sure to always use a [query key](https://docs.microsoft.com/en-us/azure/search/search-query-rest-api#identify-your-azure-search-services-query-api-key).
## Quick note on data
Samples and documentation assume the real estate sample index available through the portal. A demo account is provided for the samples. To create your own service and load the real estate sample [see this guide](https://docs.microsoft.com/en-us/azure/search/search-get-started-portal).

## Contents
* [Installation](https://github.com/EvanBoyle/AzSearch.js#installation)
    * [CDN](https://github.com/EvanBoyle/AzSearch.js#cdn)
    * [NPM](https://github.com/EvanBoyle/AzSearch.js#npm)
* [Automagic](https://github.com/EvanBoyle/AzSearch.js#automagic)
    * [Basic usage](https://github.com/EvanBoyle/AzSearch.js#basic-usage)
    * [constructor](https://github.com/EvanBoyle/AzSearch.js#constructor)
    * [addSearchBox](https://github.com/EvanBoyle/AzSearch.js#addsearchbox)
    * [addResults](https://github.com/EvanBoyle/AzSearch.js#addresults)
    * [addPager](https://github.com/EvanBoyle/AzSearch.js#addpager)
    * [addRangeFacet](https://github.com/EvanBoyle/AzSearch.js#addrangefacet)
    * [addCheckboxFacet](https://github.com/EvanBoyle/AzSearch.js#addcheckboxfacet)
    * [store](https://github.com/EvanBoyle/AzSearch.js#store)
    * [Custom CSS](https://github.com/EvanBoyle/AzSearch.js#custom-css)
* [Components & Containers](https://github.com/EvanBoyle/AzSearch.js#components--containers)
* [Development](https://github.com/EvanBoyle/AzSearch.js#development)

## Installation

### CDN

```html
<!-- LINKS ARE NOTE LIVE YET -->



<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/azsearch.js/0.0.2/AzSearch.css">
<!-- Dependencies -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/react/15.5.0/react.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/react/15.5.0/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/redux/3.6.0/redux.min.js"></script>
<!-- Main -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/azsearch.js/0.0.2/AzSearch.bundle.js"></script>
```

### NPM

```
npm install azsearch.js --save
```

## Automagic

Automagic provides a set of simple APIs to generate a sample search UI. Automagic is a wrapper of [AzSearchStore](https://github.com/EvanBoyle/AzSearchStore) (for state management) and the sample react components in this repo. 

### Basic usage

```js
    // Initialize
    var automagic = new AzSearch.Automagic({ 
        index: "realestate-us-sample", 
        queryKey: "<KEY>", 
        service: "azs-playground" });

    // Add a search box on id #seachBox that uses suggester "sg", grabbing some additional 
    // fields to display during suggestions.
    automagic.addSearchBox("searchBox",
        {
            highlightPreTag: "<b>",
            highlightPostTag: "</b>",
            suggesterName: "sg",
            select: "number,street,city,region,countryCode"
        });
    // add a results view
    automagic.addResults("results");
    // Adds a pager control << 1 2 3 ... >>
    automagic.addPager("pager");
    // range facet for sqft
    automagic.addRangeFacet("sqftFacet", "sqft", "number", 0, 17000);
    // checkbox facet for numeric field beds
    automagic.addCheckboxFacet("bedsFacet", "beds", "number");
    // checkbox facet for numeric field baths
    automagic.addCheckboxFacet("bathsFacet", "baths", "number");
    // checkbox facet for string field type
    automagic.addCheckboxFacet("typeFacet", "type", "string");
    // checkbox facet for collection field tags
    automagic.addCheckboxFacet("tagsFacet", "tags", "collection");
```

### constructor
* ```constructor(config)```

Sets basic configuration to connect to service. Expects an object of type Config from AzSearchStore

```js
    // constructs and instance of Automagic
    // will also create an instance of AzSearchStore that connects to your service
    var automagic = new AzSearch.Automagic({ 
        index: "realestate-us-sample", 
        queryKey: "<KEY>", 
        service: "azs-playground" });
```

```ts
    type Config = {
        index: string;
        queryKey: string;
        service: string;
        suggestCallback?: (state: Store.SearchState, postBody: {
            [key: string]: any;
        }) => Promise<any>;
        searchCallback?: (state: Store.SearchState, postBody: {
            [key: string]: any;
        }) => Promise<any>;
    };
```

### addSearchBox
* ```addSearchBox(htmlId, suggestionsParametersUpdate, suggestionTemplate?, css?)```

Adds an input field capable of suggestions/autocomplete and executing search requests. Attaches on the specified htmlID. Optionally takes SuggestionUpdateParameters (from AzSearchStore), a [mustache template](https://mustache.github.io/mustache.5.html) to customize rendering, or css overrides. When template is not specified, a json representation of the suggestions is displayed. When specified, the mustache template is rendered against east suggestion. The content of each  suggestion can be customized by adding fields via the select parameter as shown in the example below, or by setting a 
[suggestions processor](https://github.com/EvanBoyle/AzSearchStore#client-side-results-processing) on the store.
```js
    // css class overrides
    var css = {
            searchBox__button: "searchBox__button btn btn-default",
    };
    // mustache template for custom suggestion rendering. Default displays formatted JSON
    var suggestionsTemplate = "{{displayText}} <br/> {{{searchText}}}";
    // Add a search box that uses suggester "sg", grabbing some additional fields to 
    // display during suggestions. Use the template defined above
    automagic.addSearchBox("searchBox",
        {
            highlightPreTag: "<b>",
            highlightPostTag: "</b>",
            suggesterName: "sg",
            select: "number,street,city,region,countryCode"
        },
        suggestionsTemplate,
        css);

    // Set a processor to format suggestions for display
    var suggestionsProcessor = function(results) {
        return results.map(function(result){
            result.displayText = result.number + " " + 
                result.street+ " " +result.city+ ", " +result.region+ " " +
                result.countryCode;
{'fraction_non_alphanumeric': 0.1383408071748879, 'fraction_numerical': 0.004035874439461884, 'mean_word_length': 3.5778309955525147, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 55, 'https://': 56, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4055841', 'n_tokens_mistral': 4122, 'n_tokens_neox': 3919, 'n_words': 983}