Updating data at runtime

[jeffgreco13]

Does anyone know of the best way to update the data at runtime?

Currently using the TALL stack (Tailwind, Alpinejs, Livewire, Laravel) and we have a working Blade component, but we're struggling to get autoCompleteJS to observe changes to the array.

[TarekRaafat]

Hello @jeffgreco13,

Could you please clarify what do you mean by "update the data at runtime"?

Because, if you set data.cache to false the data will be updated on every trigger already.

[jeffgreco13]

Hi @TarekRaafat.

Basically, I'm trying to create chained autocomplete fields where the selection in field 1 will change the results in field 2.

Here is the Blade component:

<script>
var {{$id}}_data = @json($data);
</script>
<div
    wire:ignore
    {{$attributes->wire('model')}}
    class="relative inline-block w-full"
    x-data
    x-init="new autoComplete({
    selector: '#{{$id}}',
    data: {
        src: {{$id}}_data,
        cache:false
    },
    resultsList: {
        noResults: (list, query) => {
            // Create 'No Results' message list element
            const message = document.createElement('li');
            message.setAttribute('class', 'no_result');
            // Add message text content
            message.innerHTML = '<span>'+query+' not found. It will be created.</span>';
            // Add message list element to the list
            list.appendChild(message);
        },
    },
    resultItem: {
        highlight: {
            render: true
        }
    },
    onSelection:(feedback) => {
        const selection = feedback.selection.value;
        document.querySelector('#{{$id}}').value = selection;
        $dispatch('input',selection);
    }
    });"
>
    <input id="{{$id}}" {{ $disabled ? 'disabled' : '' }} {!! $attributes->except('model')->merge(['class' => 'border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm disabled:bg-gray-200']) !!} type="text" autocomplete="off"/>
    @if($helpText)
    <p class="text-sm text-gray-400">{{$helpText}}</p>
    @endif

</div>

Then I include the component like this:
<x-autocomplete :data="$companyNames" wire:model="opportunity.company_name" class="w-full" id="opportunity_company_name" placeholder="Acme Co."/>

The $companyNames PHP variable changes successfully, and I can see the JS variable updating within the page source:

However, despite the JS variable updating correctly the autocomplete results still returns the previous data set instead of the updated array.
Any ideas?

[folknor]

I'm only writing this reply to try to be helpful, not to say "this is the wrong place to ask" -- this is not the wrong place to ask, but it might not be the best place to ask.

It seems to me that this is a question that other users of Laravel/Blade are much more likely to know the answer to than a JS user. I don't know what kind of developers read the discussions here.

data.src is only passed by reference inside autoComplete.js. It never changes the array, copies it, splices it, or otherwise mangles it. When it searches the given data it does a forEach loop and creates a new array every time where it works on a copy of the value by doing data.src[...].toString(), like this

    data.store.forEach(function (record, index) {
      var search = function search(key) {
        var recordValue = (key ? record[key] : record).toString();
        var match = typeof customSearchEngine === "function" ? customSearchEngine(query, recordValue) : searchEngine(query, recordValue, config);
        if (!match) return;
        var result = {
          index: index,
          match: match,
          value: record
        };
        if (key) result.key = key;
        results.push(result);
      };

Of course I could be wrong, and there could be a bug in the code that I can't see. Again, I'm just trying to help - I think you will get better answers somewhere else. But I could be wrong about that as well :-)

[TarekRaafat]

@jeffgreco13, you could try updating the data directly into the data.store instead of data.src with the cache turned off to bypass the data processing stage as @folknor mentioned.

Please try it and let me know how it goes.

[jeffgreco13]

I believe my solution is just going to involve setting up a route that returns filtered json data. I've moved on to another challenge but I'll post back here once I have a working solution.

In the meantime, if anyone using the TALL stack is looking for a Blade component I hope this helps:

@props(['disabled' => false,'helpText'=>false,'id'=>false,'data'])
<div
    wire:ignore
    class="relative inline-block w-full"
    x-data
    x-init="new autoComplete({
    selector: '#{{$id}}',
    data: {
        src: {{$data}},
    },
    resultsList: {
        maxResults:15,
        noResults: (list, query) => {
            const message = document.createElement('li');
            message.setAttribute('class', 'no_result');
            message.innerHTML = '<span>'+query+' not found. It will be created.</span>';
            list.appendChild(message);
        },
    },
    resultItem: {
        highlight: {
            render: true
        }
    },
    onSelection:(feedback) => {
        const selection = feedback.selection.value;
        document.querySelector('#{{$id}}').value = selection;
        $wire.set('{{$attributes->wire('model')->value()}}',selection);
    }
    });"
>
    <input id="{{$id}}" {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm disabled:bg-gray-200']) !!} type="text" autocomplete="off"/>
    @if($helpText)
    <p class="text-sm text-gray-400">{{$helpText}}</p>
    @endif

</div>

Usage:
<x-autocomplete id="names" helpText="Start typing to search names..." :data="$arrayOfNames" />