Semantic-UI Search Fluid Variation

Last Updated : 11 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Search is used to allow the user to search different things on the website. The search can help to search blogs, tools, other links, etc. Semantic UI Search Fluid Variation enables the search results to take the entire width of its container.

Semantic UI Search Fluid Variation Classes:

fluid: On adding this class, the search results take up the width of its container.

Syntax: Add the fluid option to the Search element as follows:

<div class="ui fluid search">
    ...
</div>

Example: In the following example, we have the search of fluid type.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"/> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
  </head> 
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> 
            GeeksforGeeks 
          </h1> 
        </div> 
        <strong> 
          Semantic UI Search Fluid Variation 
        </strong> 
      </center> 
      <div class="ui segment"> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <p>Find the best programming tutorials here.</p> 
        <div class="ui fluid search"> 
          <div class="ui icon input"> 
            <input
              class="prompt"
              type="text"
              placeholder="Search tutorials..."
            /> 
            <i class="search icon"></i> 
          </div> 
          <div class="results"></div> 
        </div> 
      </div> 
    </div> 
    <script> 
      var tutorials = [ 
        { title: 'Data Structures' }, 
        { title: 'Algorithms' }, 
        { title: 'Machine Learning' }, 
        { title: 'Web Development' }, 
        { title: 'Competitive Programming' }, 
        { title: 'Java' }, 
        { title: 'C' }, 
        { title: 'C#' }, 
        { title: 'C++' }, 
      ] 
      $('.ui.search').search({ 
        source: tutorials, 
      }) 
    </script> 
  </body> 
</html>