Livewire with jqueryUI Autocomplete - not passing clicked on autocomplete value for search

I'm having trouble passing the clicked on autocomplete element's value to my livewire search function when I click my search button. The search and autocomplete work, except that when I clicked on an element from the autocomplete dropdown that value is not what is passed to my live wire render function, only the manually typed-in characters are passed.

So for example, if I type in "Title of" and click "Title of Poster 1" from the autocomplete dropdown (putting "Title of Poster 1" text in the search input field). Then click search, only "Title of" is passed so the results include all posters with "Title of" in the title. I'm trying to acheive the result of only the poster with the title, "Title of Poster 1".

Seems like I have it setup so $search is only updated on the pressing of keys and doesn't update when a value is click from the auto complete dropdown.

Any help fixing this would be greatly appreciated.

my live wire component

class PosterData extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $search;
    
    public function render()
    {   
        $posters = Poster::searchFilter([$this->search, '', ''])->with('author', 'category', 'country', 'profile')->paginate(10);

        return view('livewire.poster-data', [
            'posters' => $posters,
        ]);
        
    }
}

the html

<div class="d-flex" id="searchBoxRow">
                <input wire:model.defer="search" class="form-control mr-sm-2" id="inlineFormInput" val="" type="search" placeholder="Search Posters" aria-label="Search Posters" spellcheck="true">
                <button wire:click="render" class="btn btn-primary" id="posterSearchButton" type="submit">
                    <i class="bi bi-search button-icon"></i>
                    <span class="button-text">Search</span>
                </button>
            </div>

QAV

4 years ago

Best Answer

Level 3

found a solution here: https://forum.laravel-livewire.com/t/data-binding-not-working-with-value-changed-by-js/989

"wire:model is updated when the input event is updated.... This should trigger the input event on the field and cause livewire to communicate to your backend.""

I added the relvent code to an on chage event of my input.

$('#inlineFormInput').on('change', function(event) {
    var element = document.getElementById('inlineFormInput');
    element.dispatchEvent(new Event('input'));
});

Please or to participate in this conversation.