How to add another input in the Algolia autocomplete form

To add another input in the Algolia autocomplete form, you can add an additional input element to the HTML template and then update the getSources function to include the new input value in the Algolia search query. Here's an example of how you can achieve this:

<template>
  <div class="app-container">
    <h1>Vue Application</h1>
    <form id="autocomplete">
      <input type="text" name="query" placeholder="Search for properties" />
      <input type="text" name="location" placeholder="Location" />
    </form>
  </div>
</template>

<script lang="jsx">
import { h, Fragment, render, onMounted } from "vue";
import algoliasearch from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";

export default {
  name: "AutoComplete",
  setup() {
    onMounted(() => {
      autocomplete({
        onStateChange({ state }) {
          console.log(state.query); // Actual value
        },
        container: "#autocomplete",
        getSources({ query, setQuery, refresh }) {
          const location = document.querySelector('input[name="location"]').value;
          return [
            {
              sourceId: "properties",
              getItems({query}) {
                return getAlgoliaResults({
                  searchClient: algoliasearch(
                    "5ALV3LSLJ1",
                    "bde35d15e4037209a089a5731721c6c1"
                  ),
                  queries: [
                    {
                      indexName: "properties",
                      query,
                      params: {
                        hitsPerPage: 5,
                        aroundLatLng: location // Add location to the search query
                      },
                    },
                  ],
                });
              },
              templates: {
                item({ item, components }) {
                  return (
                    <div className="aa-ItemWrapper">
                      <div className="aa-ItemContent">
                        <div className="aa-ItemContentBody">
                          <div className="aa-ItemContentTitle">
                            <components.Highlight hit={item} attribute="location" />
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                },
              },
            },
          ];
        },
        renderer: { createElement: h, Fragment, render },
      });
    });
  },
};
</script>

In this example, we added a new input element for the location and updated the getSources function to include the location value in the Algolia search query using the aroundLatLng parameter. Note that we also updated the form ID to autocomplete to match the container ID used in the autocomplete function.