use regex for search

This commit is contained in:
Martin McKeaveney 2021-02-01 14:46:44 +00:00
parent 6725f820a4
commit 3733b5f5ae
2 changed files with 10 additions and 10 deletions

View File

@ -29,6 +29,7 @@
$: categories = Object.entries(groupBy("category", bindings)) $: categories = Object.entries(groupBy("category", bindings))
$: value && checkValid() $: value && checkValid()
$: searchRgx = new RegExp(search, "ig")
function onClickBinding(binding) { function onClickBinding(binding) {
const position = getCaretPosition() const position = getCaretPosition()
@ -61,7 +62,7 @@
<Heading extraSmall>{categoryName}</Heading> <Heading extraSmall>{categoryName}</Heading>
<Spacer extraSmall /> <Spacer extraSmall />
{#each bindings.filter(binding => {#each bindings.filter(binding =>
binding.label.startsWith(search) binding.label.match(searchRgx)
) as binding} ) as binding}
<div class="binding" on:click={() => onClickBinding(binding)}> <div class="binding" on:click={() => onClickBinding(binding)}>
<span class="binding__label">{binding.label}</span> <span class="binding__label">{binding.label}</span>
@ -75,9 +76,7 @@
{/each} {/each}
<Heading extraSmall>Helpers</Heading> <Heading extraSmall>Helpers</Heading>
<Spacer extraSmall /> <Spacer extraSmall />
{#each helpers.filter(binding => {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
binding.label.startsWith(search)
) as helper}
<div class="binding" on:click={() => onClickBinding(helper)}> <div class="binding" on:click={() => onClickBinding(helper)}>
<span class="binding__label">{helper.label}</span> <span class="binding__label">{helper.label}</span>
<br /> <br />

View File

@ -29,6 +29,7 @@
) )
$: dispatch("update", value) $: dispatch("update", value)
$: ({ instance, context } = groupBy("type", bindableProperties)) $: ({ instance, context } = groupBy("type", bindableProperties))
$: searchRgx = new RegExp(search, "ig")
function checkValid() { function checkValid() {
// TODO: need to convert the value to the runtime binding // TODO: need to convert the value to the runtime binding
@ -69,7 +70,7 @@
<Spacer small /> <Spacer small />
<ul> <ul>
{#each context.filter(context => {#each context.filter(context =>
context.readableBinding.startsWith(search) context.readableBinding.match(searchRgx)
) as { readableBinding }} ) as { readableBinding }}
<li on:click={() => addToText(readableBinding)}> <li on:click={() => addToText(readableBinding)}>
{readableBinding} {readableBinding}
@ -83,7 +84,7 @@
<Spacer small /> <Spacer small />
<ul> <ul>
{#each instance.filter(instance => {#each instance.filter(instance =>
instance.readableBinding.startsWith(search) instance.readableBinding.match(searchRgx)
) as { readableBinding }} ) as { readableBinding }}
<li on:click={() => addToText(readableBinding)}> <li on:click={() => addToText(readableBinding)}>
{readableBinding} {readableBinding}
@ -95,13 +96,13 @@
<Heading extraSmall>Helpers</Heading> <Heading extraSmall>Helpers</Heading>
<Spacer small /> <Spacer small />
<ul> <ul>
{#each helpers.filter(helper => {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
helper.label.startsWith(search)
) as helper}
<li on:click={() => addToText(helper.text)}> <li on:click={() => addToText(helper.text)}>
<div> <div>
<Label extraSmall>{helper.displayText}</Label> <Label extraSmall>{helper.displayText}</Label>
<div class="description">{@html helper.description}</div> <div class="description">
{@html helper.description}
</div>
</div> </div>
</li> </li>
{/each} {/each}