selection via Arrow Key and Enter submits incorrect form value

[nikhiltalreja]

This is a great script and just what I was looking for, but I had to tweak it for working with dynamic radio buttons. The issue is - down arrow and enter keypress (macos - chrome/safari) doesn't work. Mouse click works. How to fix this behaviour. The code used below works with mouse click on selection. But enter does a get action and submits a form variable instead of the object.id.

    onSubmit: ({ index, element, object, results }) => {
      //console.log("complex: ", index, element, object, results);
      const myArray = object.text.split("|");
      element.value = myArray[0];
      window.open("/"+encodeURI(object.id),"_self");
    },


    onSelectedItem: ({ element, object }) => {
        if (!object) return;
        const myArray = object.text.split("|");
        element.value = myArray[0];
    }

[tomickigrzegorz]

Unfortunately, I have no idea how to help you, I don't have a mac.
You have to figure out how to do it yourself and it's best to share the solution here.

Good luck

[nikhiltalreja]

I fixed it by removing the form tag

…

On 11-Apr-2022, at 11:36 PM, Grzegorz Tomicki ***@***.*** ***@***.***>> wrote: Unfortunately, I have no idea how to help you, I don't have a mac. You have to figure out how to do it yourself and it's best to share the solution here. Good luck — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUDIZF34BFVGYFVE7JTK6YDVERSY3ANCNFSM5TD3RAOA>. You are receiving this because you authored the thread.

[tomickigrzegorz]

This is probably the fastest solution.
When I have a moment, I will also check it on the PC because it is possible that when there is a form, this error also occurs.

[nikhiltalreja]

Actually it is not a MAC problem per se. Sorry if “Mac” confused you. I wanted to discuss another problem for which I have a sloppy solution. But you can suggest a better method - ————form layout----- Three Radio Buttons Rad 1. Rad 2. Rad 3. AutoComplete Box ———————————————— Every Rad click updates the a parameter in the fetch URL and this gets data from the appropriate table. So I have table - 1, table -2…3 The Behaviour - click on rad1, enter data in autocomplete box, get data from table-1, click on rad2 get data from table-2. The Problem - Table-1 + Table-2 data is shown together. The initialisation - I initialise Autocomplete whenever RAD values change. I initialise a dummy Autocomplete on the same id, and destroy it, and initialise the actual autocomplete whenever RAD value changes But the above doesn’t work The Dirty fix - So along with Destory() I also delete a DOM NODE with removeElementsByClass('auto-results-wrapper’) Grzegorz Can you suggest a better behaviour

…

On 12-Apr-2022, at 12:11 AM, Grzegorz Tomicki ***@***.***> wrote: This is probably the fastest solution. When I have a moment, I will also check it on the PC because it is possible that when there is a form, this error also occurs. — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUDIZF22CKG5N2KQFOS5NUDVERW45ANCNFSM5TD3RAOA>. You are receiving this because you authored the thread.

[tomickigrzegorz]

Yes you are right I checked the problem also has a PC :)
One thing is missing https://github.com/tomik23/autocomplete/blob/master/sources/js/script.js#L621

case keyCodes.ENTER:
  event.preventDefault(); // missing line
  this._getTextFromLi(this._selectedLi);
  break;

---

As for the radio button problem, have a working example somewhere, for example codepen.io or codesandbox.io

[nikhiltalreja]

Working example - partymap.in <http://partymap.in/> Click on Celebrity Lookup button It’s built on your code :)

…

On 12-Apr-2022, at 12:36 AM, Grzegorz Tomicki ***@***.***> wrote: Yes you are right I checked the problem also has a PC :) One thing is missing https://github.com/tomik23/autocomplete/blob/master/sources/js/script.js#L621 <https://github.com/tomik23/autocomplete/blob/master/sources/js/script.js#L621> case keyCodes.ENTER: event.preventDefault(); // missing line this._getTextFromLi(this._selectedLi); break; As for the radio button problem, have a working example somewhere, for example codepen.io or codesandbox.io — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUDIZFYKDMRQRAB4FYR3Q2DVERZZ5ANCNFSM5TD3RAOA>. You are receiving this because you authored the thread.

[tomickigrzegorz]

Unfortunately, I cannot advise you at the moment. No time.
I can only tell you that you have some error because every click on the radio button adds every time:

<button class = "auto-clear hidden" type = "button" title = "clear the search query" aria-label = "clear the search query"> </button>

[nikhiltalreja]

That is what I told you, it doesn’t destroy properly. Due to lack of time I also cannot fix.

…

On 12-Apr-2022, at 12:46 AM, Grzegorz Tomicki ***@***.***> wrote: Unfortunately, I cannot advise you at the moment. No time. I can only tell you that you have some error because every click on the radio button adds every time: <button class = "auto-clear hidden" type = "button" title = "clear the search query" aria-label = "clear the search query"> </button> — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUDIZF74XMLV5KLJ762G66TVER27FANCNFSM5TD3RAOA>. You are receiving this because you authored the thread.

[tomickigrzegorz]

<input type="radio" name="nazwa" value="one" />
<input type="radio" name="nazwa" value="two" />
<input type="radio" name="nazwa" value="three" />

<div class="auto-search-wrapper">
  <input type="text" id="local" placeholder="type w" />
</div>

let data = "";
document.addEventListener("input", (e) => {
  if (e.target.type === "radio") {
    data = "";

    if (e.target.value === "one") {
      data = [{ name: "A" }, { name: "B" }, { name: "C" }, { name: "D" }];
    }
    if (e.target.value === "two") {
      data = [{ name: "E" }, { name: "F" }, { name: "G" }, { name: "H" }];
    }
    if (e.target.value === "three") {
      data = [{ name: "I" }, { name: "J" }, { name: "K" }, { name: "L" }];
    }

    autocomplete.destroy();
  }
});

const autocomplete = new Autocomplete("local", {
  onSearch: ({ currentValue }) => {
    console.log(data);
    // local data
    return data
      .sort((a, b) => a.name.localeCompare(b.name))
      .filter((element) => {
        return element.name.match(new RegExp(currentValue, "i"));
      });
  },

  onResults: ({ matches }) =>
    matches.map((el) => `<li>${el.name}</li>`).join(""),
});

[nikhiltalreja]

This is a bug because destroy() should remove this code. This is initialisation code. Kindly check the bug or tell me how to remove it. I can remove DOM as a dirty fix.

…

-Nikhil

On 12-Apr-2022, at 12:46 AM, Grzegorz Tomicki ***@***.***> wrote:  Unfortunately, I cannot advise you at the moment. No time. I can only tell you that you have some error because every click on the radio button adds every time: <button class = "auto-clear hidden" type = "button" title = "clear the search query" aria-label = "clear the search query"> </button> — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[tomickigrzegorz]

The destroy() method does not remove the element from the DOM. It only removes the results and disables the button that clears the data from the input field - sets everything by default.

See the example I gave you. Works as you wanted.
Depending on the radio, the corresponding results are displayed.

[nikhiltalreja]

Thanks, I'll check it out. But just to confirm will this example modify the api params also.

…

On Tue, 12 Apr 2022 at 3:19 PM, Grzegorz Tomicki ***@***.***> wrote: The destroy() method does not remove the element from the DOM. It only removes the results and disables the button that clears the data from the input field - sets everything by default. See the example I gave you. Works as you wanted. Depending on the radio, the corresponding results are displayed. — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUDIZFZBIKII27K26DJDORLVEVBL3ANCNFSM5TD3RAOA> . You are receiving this because you authored the thread.Message ID: ***@***.***>