search

konsalex / Airport-Autocomplete-JS

Airport Autocomplete Input tag
MIT License
31 stars 18 forks source link

Autocomplete results markup #2

Closed mixerowsky closed 5 years ago

mixerowsky commented 5 years ago

Hi,

Is it anyhow possible to change markup in results from autocomplete?

I need some wrappers there instead string with <br>.

konsalex commented 5 years ago

Hey @mixerowsky ! Could you be more precise in order to make it a feature?

I would love to help so give me a concrete example 😄

Out of curiosity about what kind of project are you using Airport-Autocomplete-JS ?

mixerowsky commented 5 years ago

Hey @konsalex ! Thanks for quick respond.

Autocomplete work awesome and very fast, I just want to make a bit different markup in results, right now it's like this:

<div class="autocomplete-results edit-flying-from" data-highlight="4">
    <div class=" autocomplete-result edit-flying-from single-result" data-index="0"> 
        Nis  (INI) 
        <br>
        Nis ,Serbia
    </div>
    <div class=" autocomplete-result edit-flying-from single-result" data-index="1"> 
        Inishmore Aerodrome (IOR) 
        <br>
        Inis Mor ,Ireland
    </div>
    <div class=" autocomplete-result edit-flying-from single-result" data-index="2"> 
        Inisheer Aerodrome (INQ) 
        <br>
        Inisheer ,Ireland
    </div>
    <div class=" autocomplete-result edit-flying-from single-result" data-index="3"> 
        Inishmaan Aerodrome (IIA) 
        <br>
        Inishmaan ,Ireland
    </div>
    <div class=" autocomplete-result edit-flying-from single-result" data-index="4"> 
        Tinian Intl  (TIQ) 
        <br>
        West Tinian ,Northern Mariana Islands
    </div>
</div>

and I would like something like this:

<div class="autocomplete-results edit-flying-from" data-highlight="4">
    <div class="autocomplete-result edit-flying-from single-result" data-index="0"> 
        <div class="airport-data">Nis<br>Nis ,Serbia</div>
        <div class="airport-code">INI</div>
    </div>
    <div class="autocomplete-result edit-flying-from single-result" data-index="1"> 
        <div class="airport-data">Inishmore Aerodrome<br>Inis Mor ,Ireland</div>
        <div class="airport-code">IOR</div>
    </div>
    <div class="autocomplete-result edit-flying-from single-result" data-index="2"> 
        <div class="airport-data">Inisheer Aerodrome<br>Inisheer ,Ireland</div>
        <div class="airport-code">INQ</div>
    </div>
    <div class="autocomplete-result edit-flying-from single-result" data-index="3">
        <div class="airport-data">Inishmaan Aerodrome<br>Inishmaan ,Ireland</div>
        <div class="airport-code">IIA</div>
    </div>
    <div class="autocomplete-result edit-flying-from single-result" data-index="4">
        <div class="airport-data">Tinian Intl<br>West Tinian ,Northern Mariana Islands</div>
        <div class="airport-code">TIQ</div>
    </div>
</div>

so I can follow the design I have.

I'm working on the project where you can do some drawing on the map after you enter 'from' and 'to' airport (similar to kiwi.com), that's my part of it :)

Thanks for helping out on this!

konsalex commented 5 years ago

@mixerowsky Hey there! Can you check the latest version and tell me how it works.

I created a feature where you can add your own styling guidelines to the suggestions 🎉

If you are embedding a script use this URL to get the latest one https://cdn.jsdelivr.net/npm/airport-autocomplete-js@latest/dist/index.browser.min.js .

Check the README.md to understand how the formatting works and I am waiting for your feedback in order to close the issue.

mixerowsky commented 5 years ago

@konsalex Working awesome! Thank you very much.

One more thing, you set wrong version in README.md file, it's not 2.0.4 but 2.1.0 on jsdelivr.

konsalex commented 5 years ago

@mixerowsky I am waiting for the results in your production website!

mixerowsky commented 5 years ago

Hej @konsalex

After last update and changes from #3 the formatting isn't working, it's always default one.