Problmemem jest to ze submit nie odpala           funkcji handleSubmit
     <div class="job-search-sec">
                  <div class="job-search style2">
                    <h3><?php _e("Are you looking for a job? We're looking for you!", "StacjaRekrutacja") ?></h3>
                    <span><?php _e("Find an offer and apply without a resume - it's easy!", "StacjaRekrutacja") ?></span>
                    <div class="search-job2">
                      <form id="external-search-form" ref="form" @submit.prevent="handleSubmit($event)" v-cloak>
                        <div class="row no-gape">
                          <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="job-field">
                              <input
                                type="text"
                                placeholder="Keywords"
                                v-model="fields.s" />
                            </div>
                          </div>
                          <div class="col-lg-4 col-md-4 col-sm-6">
                            <div class="job-field autocomplete-wrapper position-relative">
                              <input
                                type="text"
                                placeholder="Location"
                                v-model="fields.location"
                                @focus="showAutocomplete('location')"
                                @blur="hideAutocomplete('location')"
                                @keydown="handleKeyDown('location', $event)"
                                @input="handleLocationInput"
                                autocomplete="off" />

                              <!-- Autocomplete dropdown -->
                              <div v-if="autocomplete.visible.location" class="autocomplete-results shadow border">
                                <div v-if="autocomplete.loading.location" class="autocomplete-loading p-2 text-center">
                                  <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="sr-only">Loading...</span>
                                  </div>
                                </div>
                                <div v-else-if="autocomplete.location.length === 0" class="p-2 text-center text-muted">
                                  No results
                                </div>
                                <div v-else class="autocomplete-items">
                                  <div v-for="(item, index) in autocomplete.location"
                                    :key="index"
                                    :class="{'active': index === autocomplete.selected.location}"
                                    class="autocomplete-item p-2"
                                    @mousedown="selectAutocompleteItem('location', item)">
                                    {{ item.name }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-2 col-md-3 col-sm-12">
                            <button type="submit">FIND JOB <i class="la la-search"></i></button>
                          </div>
                        </div>
                      </form>
                    </div><!-- Job Search 2 -->

//assets/block/search-block/external-search-form.js

(function () {
    const { createApp } = Vue;

    // Wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', function () {
        const externalSearchForm = document.querySelector('#external-search-form');
        if (!externalSearchForm) return;

   const app =      createApp({
            data() {
                return {
                    fields: {
                        s: '',
                        location: '',
                        city: '',
                        province: ''
                    },
                    autocomplete: {
                        visible: { location: false },
                        location: [],
                        selected: { location: -1 },
                        loading: { location: false }
                    },
                    searchbar: {
                        locations: []
                    }
                }
            },
            async mounted() {
                await this.loadLocations();
            },
            methods: {
                async loadLocations() {
                    const formData = {
                        first: true,
                        showblocks: false,
                        gpsWork: false,
                        searchToShow: false,
                        _wpnonce: searchJob._wpnonce
                    };

                    try {
                        const response = await $.ajax({
                            url: '/wp-json/st/v1/search_job',
                            type: 'POST',
                            dataType: 'json',
                            data: { formData: formData }
                        });

                        if (response.success) {
                            this.searchbar.locations = response.data.locations || [];
                        }
                    } catch (error) {
                        console.error('Error loading locations:', error);
                    }
                },

                showAutocomplete(field) {
                    if (field === 'location') {
                        this.autocomplete.visible.location = true;
                        this.autocomplete.selected.location = -1;
                        this.filterLocations();
                    }
                },

                hideAutocomplete(field) {
                    setTimeout(() => {
                        this.autocomplete.visible[field] = false;
                    }, 200);
                },

                filterLocations() {
                    const query = this.fields.location.toLowerCase();
                    this.autocomplete.location = this.searchbar.locations.filter(location =>
                        location.name.toLowerCase().includes(query)
                    ).slice(0, 10);
                },


                handleKeyDown(field, event) {
                    if (field === 'location' && this.autocomplete.visible.location) {
                        const items = this.autocomplete.location;

                        if (event.key === 'ArrowDown') {
                            event.preventDefault();
                            this.autocomplete.selected.location =
                                this.autocomplete.selected.location < items.length - 1
                                    ? this.autocomplete.selected.location + 1
                                    : 0;
                        } else if (event.key === 'ArrowUp') {
                            event.preventDefault();
                            this.autocomplete.selected.location =
                                this.autocomplete.selected.location > 0
                                    ? this.autocomplete.selected.location - 1
                                    : items.length - 1;
                        } else if (event.key === 'Enter') {
                            event.preventDefault();
                            if (this.autocomplete.selected.location >= 0) {
                                this.selectAutocompleteItem('location', items[this.autocomplete.selected.location]);
                            }
                        } else if (event.key === 'Escape') {
                            this.autocomplete.visible.location = false;
                        }
                    }
                },

                selectAutocompleteItem(field, item) {
                    if (field === 'location') {
                        this.fields.location = item.name;
                        this.fields.city = item.city;
                        this.fields.province = item.province;
                        this.autocomplete.visible.location = false;
                    }
                },

                handleLocationInput() {
                    this.filterLocations();
                    // Clear city and province if user types manually
                    this.fields.city = '';
                    this.fields.province = '';
                },

                handleSubmit(event) {
                    debugger
                    // event.preventDefault();

                    // const searchParams = new URLSearchParams();

                    // if (this.fields.s.trim()) {
                    //     searchParams.append('s', this.fields.s.trim());
                    // }

                    // if (this.fields.city) {
                    //     searchParams.append('city', this.fields.city);
                    // }

                    // if (this.fields.province) {
                    //     searchParams.append('province', this.fields.province);
                    // }

                    // const searchUrl = '/oferty-pracy/?' + searchParams.toString();
                    // window.location.href = searchUrl;
                }
            }
        });
        app.mount('#external-search-form');
    });
})();