How to make stakoverflow-like search and add tag functionality with livewire

Hey everyone,
I’m kinda new to livewire and currently working on a project and need to know what do you call this search and add tag functionality thingy that some websites use like StackOverflow? and how to make the same functionality using livewire? is there any guide or tutorial about how to make it? I could not find anything because I don’t know what are they called.

stackoverflow_tag_search|690x274

Try to google “livewire dropdown with search”. There are few videos on it on youtube and some blog posts.
Most of them based on tailwind and alpine js.

Hey @sxshateri
You can do the following:
In this case you can search for the articles by categories

In Your blade file

<div class="md:w-1/3 relative" x-data="{isTyped: false}" >
    <div class="pt-2 relative mx-auto w-full flex items-center justify-center text-gray-600 mb-1">
        <input class="border-2 w-full bg-gray-200 placeholder-gray-800 focus:bg-white border-gray-300 bg-white h-10 px-5 pr-16 rounded-md text-sm focus:outline-none"
                type="search"
                name="search"
                id="search"
                x-ref="searchField"
                x-on:input.debounce.400ms="isTyped = ($event.target.value != '')"
                placeholder='Search... Press / to focus'
                autocomplete="off"
                wire:model.debounce.500ms="search"
                x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
                x-on:keyup.escape="isTyped = false; $refs.searchField.blur()">
        <button type="submit" class="absolute right-0 top-0 mt-5 mr-2">
            <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
              <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
            </svg>
          </button>
    </div>

    {{-- search box --}}
        <div x-show="isTyped">
            <div class="absolute shadow-lg left-0 p-3 px-2 my-5 mt-2 article-search rounded w-full z-20" style="background: #fbfbfb">
                <div class="text-center p-3 container mx-auto" wire:loading wire:loading.target="search">
                    <img src="path/to/loading-image.extension" class="text-center inline-block" alt="Loading state icon">
                </div>
                <div class="p-1">
                        @forelse($posts as $post)
                            <div>
                                <ul class="p-3">
                                    <li class="text-md md:text-lg mb-2 flex items-center">
                                        <a href="#"
                                            class="text-indigo-500 hover:text-indigo-600 transition ease-in-out duration-75">
                                            {{Str::limit($post->title, 40)}}
                                        </a>
                                        <span class="mr-2 ml-2">
                                            ↪
                                        </span>
                                        <a href="#"
                                            class="text-red-500 hover:text-red-600 transition ease-in-out duration-75">
                                            {{$post->category->name}}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        @empty
                            <div class="text-center">
                                {{$isEmpty}}
                            </div>
                        @endforelse
                </div>
            </div>
        </div>
</div>

In your component:

...
    public $search, $isEmpty = '';

    public function render()
    {
        if (!is_null($this->search)) {
            $posts = Post::search($this->search)
                        ->with('category')
                        ->take(5)
                        ->get();
        } else {
            $posts = [];
            $this->isEmpty = __('Nothings Found.');
        }

        return view('path.to.your.blade.file', [
            'posts' => $posts
        ]);
    }
...

In Post Model:

...
    public static  function search($searchKey)
    {
        return self::where('title', 'LIKE', '%' . $searchKey . '%')
        ->orWhere('body','LIKE', '%' . $searchKey . '%')->with('category');
    }
...

I hope you got the Idea.