Can't choose airport from the list

[mixerowsky]

Hi @konsalex !

I found the issue in the latest version.

When you search for the airport you get suggestions but can't select nothing from the list to fill in the field.

It could be good idea that it's possible to choose what you want as field value after you select some airport from the suggestion list as well.

[konsalex]

Hey @mixerowsky .

Did you add the data-index="$(i)" in the parent div of the result?

If not the onClick controller can't know which result you clicked! It is required, I updated the README.md 😅

[mixerowsky]

Yes, I did, and I see index in markup.

Here is my options:

        const airportOptions = {
          shouldSort: true,
          threshold: 0.4,
          maxPatternLength: 32,
          includeMatches: true,
          minMatchCharLength: 3,
          formatting: `<div class="$(unique-result) single-result" data-index="$(i)"><div class="airport-data">$(name)<br>$(city) ,$(country)</div><div class="airport-code">$(IATA)</div></div>`
        };

[konsalex]

Hey @mixerowsky there are four issues here.

• The first one is that you are giving airportOptions all in one object. You should make fuse_options in one key it's self.

• The second one is that includeMatches is not supported yet, because fuse.js is returning the results in a completely different formatting.

• The third and last is that no Keys to search are specified.

• The fourth is that if divs have multiple children, there is a difficulty with event listener, and event bubbling should be done. In order to avoid this I recommend you to add data-index=$(i) in every div inside the formatting string classes.

A working example is the following :

 const airportOptions = {
           fuse_options : { 
               shouldSort: true,
              threshold: 0.4,
              maxPatternLength: 32,
              minMatchCharLength: 3,
              keys: [{
                 name: "IATA",
                weight: 0.6
                 },
                {
                   name: "name",
                   weight: 0.4
                },
              {
                 name: "city",
                weight: 0.2
              }
          ]
         },
          formatting: `<div class="$(unique-result) single-result" data-index=$(i)><div class="airport-data" data-index=$(i)>$(name)<br>$(city) ,$(country)</div><div class="airport-code" data-index=$(i)>$(IATA)</div></div>`
        };

I publish a quick change to the code and again with the latest you should see the changes. I will close this issue and if you find any additional error feel free to re-open it.