Forms and onSubmit help

[TotoroBy99]

First of all, I don't speak English, so please forgive my poor quality Google translation.

Hi everyone, I decided to use your library to be able to perform a certain task for an application at my work. Now, I don't use frameworks like React or Angular, so I work with pure JavaScript.

The problem I'm encountering is how to implement a way to get the key value of an element of the suggestion list, let me explain.

In an API I receive something like this:

Data:{
   0: {id: 01, name: Pachenko},
   1: {id: 02, name: Culiki-taka},
   etc..
}

In this way when I use Typeahead I can use these key values ​​to perform the search:

keys: ['id', 'name']

Now, the problem I'm encountering is how can I select the value of id when selecting an element of the suggestion list, because it is clear that when selecting something the value of name will be put in the input value.

Then there is the problem of how the events work, the onSubmit from what I read is only activated when enter key is pressed and although it is not bad, this is not very useful to me when I am in a form with more inputs and I use a function to capture my submit button and validate all the data, the procedure would be something like this.

1. User selects a value from the typeahead input.
2. User fills in other inputs not related to typeahead.
3. User presses the submit button to send the entered data.

expected action:
The form submission event is captured, the object id is obtained by typeahead and the rest of the input values ​​are obtained too which are then validated either by API or with other methods to then be processed.

So that's my problem, I don't know how to get the id value of my object because I'm showing the names in the suggestion list and the other thing is how can I use onSubmit to better control the submission of the form or for example to clean the input itself.

[niketpathak]

Hello @TotoroBy99 .

To answer your first question, the display() config option can be used. Although, you will have to make use of an additional hidden input. Here's an example:

Your html could be

<form action="...">
  <input type="search" name="superhero" class="search" autocomplete="off" placeholder="Search movies..." />
  <input type="hidden" name="superhero_id"> <!-- hidden input to store the id  -->
  <input type="text" name="address"> <!-- other unrelated inputs in your form  -->
  <button type="submit">Submit</button>
</form>

And in your JS, your typeahead configuration could be -

typeahead({
      input: document.querySelector('.search'),
      source: {
        prefetch: {
          url: 'https://raw.githubusercontent.com/digitalfortress-tech/typeahead-standalone/master/docs/assets/json/superheroes.json',
        },
        keys: ['title'] /* ['title', 'overview'] */,
        identity: (suggestion) => `${suggestion.id}`,
        transform: (data) => data.results,
      },
      highlight: true,
      display: (item, ev) => {
        if (ev) { // if item is selected via click or via keyboard
            const hiddenInput = document.querySelector('[name="superhero_id"]');
            hiddenInput.value = item.id; // now the hidden input will contain the id of the selected item.
        }
        // console.log('display hook :>> ', item, ev);
        return item.title; // must return whatever you wish to display in the search box.
      },

Now to answer your 2nd question. i.e. how you could clear the input.
If you navigate away (for a multiple page application), the form will get cleared on its own. But for SPA, you can simply use plain JS. Capture the onSubmit event and prevent its default action. After that you can submit the form manually and also clear the input. An example is shown below -

form.addEventListener('submit', function(event) {
    event.preventDefault(); // This will block the default form submission

    // You can validate your data and submit it via AJAX (fetch API, axios etc.)
    
   // clear the form
    document.querySelector('.search').value = ""; // clear the search box
    document.querySelector('[name="superhero_id"]').value = ""; // clear the hidden input 
    // similarly clear other inputs.
});

Hope that helps. You can refer to the FAQ section too where this has been answered before.