Alain Afflelou Design System

Searchable String 

<div x-data="searchableStrings(JSON.parse('\u005B\u007B\u0022label\u0022\u003A\u0022Option\u00201\u0022,\u0022value\u0022\u003A\u0022option1\u0022\u007D,\u007B\u0022label\u0022\u003A\u0022Option\u00202\u0022,\u0022value\u0022\u003A\u0022option2\u0022\u007D,\u007B\u0022label\u0022\u003A\u0022Option\u00203\u0022,\u0022value\u0022\u003A\u0022option1\u0022\u007D,\u007B\u0022label\u0022\u003A\u0022Option\u00204\u0022,\u0022value\u0022\u003A\u0022option2\u0022\u007D\u005D'))">
    <label class="relative mb-6 block">
        <input x-model="search" type="text" placeholder="Rechercher" class="w-full leading-icon">
        <svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
        </svg>
    </label>

    <div x-ref="items" class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8">
        <template x-for="item in items" :key="item.value">
            <label class="selection-control-label selection-control-size-md text-neutral-800">
                <span x-text="item.label"></span>
            </label>
        </template>
    </div>
</div>

<script>
    function searchableStrings(items) {
        return {
            search: '',
            allItems: items,
            searchItems: [],
            get items() {
                if (this.search === '') {
                    return this.allItems;
                }
                return this.allItems.filter((item) => {
                    return item.value
                        .replace(/ /g, '')
                        .toLowerCase()
                        .includes(this.search.replace(/ /g, '').toLowerCase());
                });
            }
        }
    }
</script>
 
{# filterable-strings.twig #}
<div x-data="searchableStrings(JSON.parse('{{ strings|json_encode|e('js') }}'))">
	<label class="relative mb-6 block">
		<input
				x-model="search"
				type="text"
				placeholder="Rechercher"
				class="w-full leading-icon"
		>
		{% render "@icons-library--search-outline" with { size: 16 } %}
	</label>

	<div x-ref="items" class="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8">
		<template x-for="item in items" :key="item.value">
			<label class="selection-control-label selection-control-size-md text-neutral-800">
				<span x-text="item.label"></span>
			</label>
		</template>
	</div>
</div>

<script>
	function searchableStrings(items) {
		return {
			search: '',
			allItems: items,
			searchItems: [],
			get items() {
				if (this.search === '') {
					return this.allItems;
				}
				return this.allItems.filter((item) => {
					return item.value
							.replace(/ /g, '')
							.toLowerCase()
							.includes(this.search.replace(/ /g, '').toLowerCase());
				});
			}
		}
	}
</script>
 
{
  "name": "filterName",
  "strings": [
    {
      "label": "Option 1",
      "value": "option1"
    },
    {
      "label": "Option 2",
      "value": "option2"
    },
    {
      "label": "Option 3",
      "value": "option1"
    },
    {
      "label": "Option 4",
      "value": "option2"
    }
  ]
}

No notes defined.