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 UsageCopied!

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 ExampleCopied!

HTMLCopied!

<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>

JavaScriptCopied!

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>
    `;
  });
});

DemoCopied!

PropsCopied!

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.

EventsCopied!

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.

MethodsCopied!

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 UsageCopied!

Programmatic SearchCopied!

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 DisplayCopied!

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);
});

StylingCopied!

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.