> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# instant:result-list

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.instantResultList

[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.instantResultList

[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1126

<LwTemplate />

## Description

The Instant Result List directive allows you to show results matching
the users typed query under the search box.

### Caveats

* You cannot use an `ng-if` on a direct child of the
  `<instant:result-list>` tag, instead wrap your `ng-if` with a `<div>`
  tag. Example:-

**Do Not!**

```xml wrap  theme={"dark"}
 <search:box>
     <instant:result-list>
         <search:result ng-if="type == 'foo'"></search:result>
         <search:result ng-if="type == 'bar'"></search:result>
     </instant:result-list>
 </search:box>
```

**Do**

```xml wrap  theme={"dark"}
 <search:box>
     <instant:result-list>
         <div>
             <search:result ng-if="type == 'foo'"></search:result>
             <search:result ng-if="type == 'bar'"></search:result>
         </div>
     </instant:result-list>
 </search:box>
```

## Usage

as element:

```xml wrap  theme={"dark"}
<instant:result-list
       [platform="{string}"]
       [query="{string}"]
       [children-selector="{string}"]
       [wildcard="{string}"]>
</instant:result-list>
```

### Directive info

* This directive creates new scope.

#### Parameters

| Param | Type | Details |
| - | - | - |
| platform  *(optional)* | **string** | The platform to get the results from, if no platform is defined it will try and use a platform called 'platform'. |
| query  *(optional)* | **string** | The query to use against the platform. If the search-within checkbox is checked the filters of this query will be reset. Also if rpp is set on the query then this will be used when getting back the results, otherwise it will be set to 5. |
| children-selector  *(optional)* | **string** | A selector for selecting the children elements that should be used for the arrow key selection mechanism. Should be used when the children to be selected are not the immediate children of resultList. |
| wildcard  *(optional)* | **string** | Whether to add a wildcard to the search query.  Valid values:  <br /> **left** - `*searchQuery` <br /> **right *(default)*** - `searchQuery*` <br /> **both** - `*searchQuery*` <br /> **none** - `searchQuery` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.