Search Lens

Attach this Search Lens component to search inputs and enable users to search by image. This adds visual search functionality to your website, allowing users to find products similar to images they upload.

Basic Usage

Add the <youzu-search-lens> tag near your search input:

<div style="position: relative">
  <input
    type="text"
    id="product-search"
    placeholder="Search products..."
    style="width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; box-sizing: border-box"
  />
  <div style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%)">
    <youzu-search-lens></youzu-search-lens>
  </div>
</div>

Basic Example

HTML

<div style="position: relative; max-width: 500px; margin: 0 auto">
  <div style="position: relative">
    <input
      type="text"
      id="product-search"
      placeholder="Search products..."
      style="width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; box-sizing: border-box"
    />
    <div style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%)">
      <youzu-search-lens 
        caption-text="Search with image" 
        show-caption="false" 
        icon-size="24px"
        icon-color="#555"
        hover-color="#000">
      </youzu-search-lens>
    </div>
  </div>
</div>

<div id="search-results" style="margin-top: 20px; min-height: 100px">
  <p style="text-align: center; color: #666">Upload an image to search for similar products</p>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const searchLens = document.querySelector('youzu-search-lens');
  const searchResults = document.getElementById('search-results');
  
  // Listen for image selected event
  searchLens.addEventListener('imageSelected', event => {
    const { imageUrl, searchId } = event.detail;
    console.log('Image selected for search', { searchId });
    
    // Update UI to show loading state
    searchResults.innerHTML = '<p style="text-align: center;">Searching...</p>';
  });
  
  // Listen for search results
  searchLens.addEventListener('success', event => {
    const { results, searchId, imageUrl } = event.detail;
    console.log('Search results received', { searchId, resultCount: results.length });
    
    // Display the results
    searchResults.innerHTML = '';
    
    // Create a preview of the searched image
    const searchedImage = document.createElement('div');
    searchedImage.innerHTML = `
      <div style="text-align: center; margin-bottom: 15px;">
        <p>Search results for:</p>
        <img src="${imageUrl}" alt="Searched image" style="max-width: 100px; max-height: 100px; border-radius: 4px;">
      </div>
    `;
    searchResults.appendChild(searchedImage);
    
    // Create a container for the results
    const resultsContainer = document.createElement('div');
    resultsContainer.style.display = 'grid';
    resultsContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(200px, 1fr))';
    resultsContainer.style.gap = '15px';
    
    // Add each result
    results.forEach(result => {
      const resultItem = document.createElement('div');
      resultItem.style.border = '1px solid #eee';
      resultItem.style.borderRadius = '4px';
      resultItem.style.padding = '10px';
      resultItem.innerHTML = `
        <img src="${result.imageUrl}" alt="${result.name}" style="width: 100%; object-fit: contain; height: 150px;">
        <h3 style="margin: 10px 0 5px; font-size: 16px;">${result.name}</h3>
        <p style="margin: 0; color: #e63946; font-weight: bold;">${result.price}</p>
        <button style="width: 100%; padding: 8px; background: #1d3557; color: white; border: none; border-radius: 4px; margin-top: 10px; cursor: pointer;">View Product</button>
      `;
      resultsContainer.appendChild(resultItem);
    });
    
    searchResults.appendChild(resultsContainer);
  });
  
  // Listen for search errors
  searchLens.addEventListener('error', event => {
    const { error, searchId } = event.detail;
    console.error('Search error', { searchId, error });
    
    // Display error message
    searchResults.innerHTML = `
      <p style="text-align: center; color: #e63946;">
        Search failed: ${error.message || 'Unknown error'}
      </p>
    `;
  });
});

Demo

Props

Prop	Type	Default	Description
`caption-text`	String	`"Search with image"`	Text displayed as caption/tooltip.
`show-caption`	Boolean	`false`	Whether to display the caption.
`icon-size`	String	`"24px"`	Size of the lens icon.
`icon-color`	String	`"#555"`	Color of the lens icon.
`hover-color`	String	`"#000"`	Color of the lens icon on hover.
`search-endpoint`	String	API default	Custom endpoint for image search.
`result-limit`	Number	`10`	Maximum number of results to return.
`auto-search`	Boolean	`true`	Whether to search automatically after image selection.
`accept-formats`	String	`"image/jpeg,image/png,image/webp"`	Accepted image formats.

Events

The YouZu Search Lens component emits the following events:

Event	Detail	Description
`imageSelected`	`{ imageUrl, searchId }`	Fired when an image is selected for search.
`searchStarted`	`{ searchId, imageUrl }`	Fired when a search starts.
`success`	`{ results, searchId, imageUrl }`	Fired when search results are received.
`error`	`{ error, searchId }`	Fired when a search fails.

Methods

The YouZu Search Lens component exposes the following methods:

Method	Parameters	Return	Description
`openFilePicker()`	None	Promise	Opens the file picker dialog.
`search(imageFile)`	`imageFile`: File	Promise	Starts a search with the given image file.
`search(imageUrl)`	`imageUrl`: String	Promise	Starts a search with the given image URL.
`clearSearch()`	None	None	Clears the current search.

Advanced Usage

Programmatic Search

You can programmatically trigger a search with an image:

const searchLens = document.querySelector('youzu-search-lens');

// Trigger the file picker
document.getElementById('custom-search-button').addEventListener('click', () => {
  searchLens.openFilePicker();
});

// Search with a specific image file
document.getElementById('file-input').addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (file) {
    searchLens.search(file);
  }
});

// Search with an image URL
function searchByUrl(imageUrl) {
  searchLens.search(imageUrl);
}

Custom Results Display

You can create a custom display for the search results:

const searchLens = document.querySelector('youzu-search-lens');

searchLens.addEventListener('success', event => {
  const { results } = event.detail;
  
  // Your custom rendering logic
  const customRenderer = new CustomResultsRenderer(
    document.getElementById('custom-results-container')
  );
  
  customRenderer.render(results);
});

Styling

You can customize the appearance of the Search Lens component using CSS variables or direct props:

<youzu-search-lens
  style="--youzu-icon-color: #2a6dc0; --youzu-hover-color: #4285f4; --youzu-icon-size: 28px;"
></youzu-search-lens>

For additional help, contact our support team.