CodePen Embed - Embedded Search

Live

​x
 
<script defer src="https://app.glean.com/embedded-search-latest.min.js"></script>
​
<div class="header">Sidebar search</div>
<input id="sidebar-search-box" placeholder="search" type="text" />
​
<div class="header">Full search experience</div>
<div class="row">
  <input id="search-box" placeholder="search..." type="text" />
  &nbsp;&nbsp;<button id="prepopulate">Prepopulate query</button>
  &nbsp;&nbsp;Latest search: <div id="latest-search"></div>
</div>
​
<div class="header">Autocomplete only</div>
<div id="autocomplete-container"></div>
<div id="autocomplete-output"></div>
<br />
<button id="autocomplete-focus-button">Click me to focus on autocomplete</button>
​
<div class="header">Search results only</div>
<div class="row">
  <input id="native-search-box" placeholder="search" type="text" />
  Current datasource:&nbsp;<span id="datasource-label">All</span>
</div>
<div id="search-results"></div>
​
<div class="header">Chat</div>
<div class="row">
  <div id="glean-app" style="height: 600px; width: 100%;" />
</div>
​

Live

xxxxxxxxxx
 
#autocomplete-container {
  display: block;
  position: relative;
  height: 60px;
  width: 500px;
}
​
#native-search-box {
  margin-right: 10px;
}
​
#search-results {
  width: 100%;
  height: 400px;
}
​
.header {
  font-size: 20px;
  margin: 30px 0 10px;
}
​
.row {
  display: flex;
}
​
#chat-container {
  height: 800px;
  width: 750px;
  max-width: 100%;
  margin-bottom: 48px;
}

Live

xxxxxxxxxx
 
addEventListener("DOMContentLoaded", () => {
 
  // Modal based full search experience
  const attach = (query = undefined) => {
    GleanWebSDK.attach(document.getElementById("search-box"), {
      domainsToOpenInCurrentTab: ['github.com'],
      onSearch: (query) => {
        document.getElementById("latest-search").innerText = query
      },
      query,
      enable3PCookieAccessRequest: true
    });
  }
  
  // Attach modal search to the search input box
  attach()
  
  // Example | Open NSR with a query pre-filled
  document.getElementById("prepopulate").addEventListener('click', (e) => attach("test query"))
​
  // Autocomplete only
  const autocomplete = GleanWebSDK.renderSearchBox(document.getElementById("autocomplete-container"), {
    onSearch: (query) => {
      document.getElementById("autocomplete-output").innerText = `Searched for ${query}`
    },
    searchBoxCustomizations: {
      border: '2px solid red',
      borderRadius: 5,
      boxShadow: '0px 0px 10px rgba(0, 255, 0, 0.5)',
      height: 40,
      horizontalMargin: 10,
      verticalMargin: 10
    },
    enable3PCookieAccessRequest: true
  });
  
  // Example | Externally focus on autocomplete when clicked
  document.getElementById('autocomplete-focus-button').addEventListener('click', () => autocomplete.focus())
  
  // Search results only
  const sb = document.getElementById("native-search-box")
  sb.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      GleanWebSDK.renderSearchResults( 
        document.getElementById("search-results"),
        {
          query: sb.value,
          onSearch: (query) => {
            console.log('ON SEARCH', query)
            document.getElementById("native-search-box").value = query
          },
          onDatasourceChange: (datasource) => {
            document.getElementById("datasource-label")
              .innerText = datasource || "All"
          },
          enable3PCookieAccessRequest: true
        }
      )
    }
  })
  
  // Sidebar search
  const ssb = document.getElementById("sidebar-search-box")
  ssb.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const query = ssb.value
      GleanWebSDK.openSidebar({
        query,
        recommendationsUrl: query.startsWith('http') ? query : undefined,
        enable3PCookieAccessRequest: true
      })
    }
  })
  
  // Embedded Chat
  EmbeddedSearch.renderChat(document.getElementById('glean-app'), {
    enable3PCookieAccessRequest: true
  })
});

This Pen is owned by Glean on CodePen. It is a fork of this Pen.

See more by @GleanWork on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.