This response may be a bit delayed, but here is the solution I have found...
<div class="ui left action input">
<div
role="listbox"
aria-expanded="false"
class="ui basic button floating dropdown"
tabindex="0"
>
<div
aria-atomic="true"
aria-live="polite"
role="alert"
class="divider text"
>
This Page
</div>
<i aria-hidden="true" class="dropdown icon"></i>
<div class="menu transition">
<div
style={{ pointerEvents: 'all' }}
role="option"
aria-checked="true"
aria-selected="true"
class="active selected item"
>
<span class="text">This Page</span>
</div>
<div
style={{ pointerEvents: 'all' }}
role="option"
aria-checked="false"
aria-selected="false"
class="item"
>
<span class="text">This Organization</span>
</div>
<div
style={{ pointerEvents: 'all' }}
role="option"
aria-checked="false"
aria-selected="false"
class="item"
>
<span class="text">Entire Site</span>
</div>
</div>
</div>
<input type="text" placeholder="Search..." />
</div>
The selection feature is not functioning properly, but hopefully someone can resolve it...
For those utilizing react, here is how you can implement it:
import React from 'react'
import { Dropdown, Input } from 'semantic-ui-react'
const options = [
{ key: 'page', text: 'This Page', value: 'page' },
{ key: 'org', text: 'This Organization', value: 'org' },
{ key: 'site', text: 'Entire Site', value: 'site' },
]
const InputExampleActionDropdown = () => (
<Input
action={
<Dropdown button basic floating options={options} defaultValue='page' />
}
actionPosition='left'
placeholder='Search...'
/>
)
export default InputExampleActionDropdown
If the appearance is unsatisfactory and requires CSS, remember to import the necessary styling for HTML or install the relevant package for react :) Cheers! Apologies for the limited assistance, but I hope this aids future searchers.