airport-autocomplete-js

    2.1.4 • Public • Published

    Airport Autocomple JS 🛩

    Build Status CocoaPods npm bundle size (minified) semantic-release

    First airport autocomplete package for JS 🎉

    After searching extensively I found out that there is not a single official repo for Aiport searching/autocompleting.

    Now there is! Check it out, use it and give me some feedback 📨

    Contents

    1. Installation
    2. Usage
    3. Demo
    4. Contribute
    5. Add Languages
    6. News

    Intro

    This package depends on Fuse.js in order to search efficient the airports.json .

    You can find the airports.json under the src/data folder. The data has being scrapped from OpenFlights.org

    As you can see in the code in order to minimize the js size and serve it fast, the airport json is being fetched only when needed from Github.

    This package aims to be used in travel websites, flight claiming platforms and anywhere you would love to.


    Installation 🐲

    Option 1: Node package

    You can install it just by typing

    npm -i airport-autocomplete-js
    

    or if you have yarn

    yarn add airport-autocomplete-js
    

    Option 2: Embed the script to your page

    Just include the script in your page served by jsDelivr CDN

    <script src="https://cdn.jsdelivr.net/npm/airport-autocomplete-js@latest/dist/index.browser.min.js"></script>
    

    Usage 🌊

    1. Initialize
    2. Custom Styling / Formatting

    Initialize

    In order to use it just initialize instances of airport-autocomplete objects just by passing the input's id.

    AirportInput("id-of-the-input-1")
    AirportInput("id-of-the-input-n")
    
    <!-- or give an options JS object in order to customize regarding your needs -->
    
    AirportInput("id-of-the-input-n", options)
    

    Regarding your needs, some of you may want to give bigger attention to IATA code search, others would love the City name search to gain the attention. So in addition to that, you can define your own options settings and pass it to the airport-autocomplete object.

    const options = {
      fuse_options : {
          shouldSort: true,
          threshold: 0.4,
          maxPatternLength: 32,
          keys: [{
              name: "IATA",
              weight: 0.6
            },
            {
              name: "name",
              weight: 0.4
            },
            {
              name: "city",
              weight: 0.2
            }
          ]
        }
    };
    
    AirportInput("id-of-the-input-1", options)
    

    For additional info on how fuse_option object works you can check Fuse.js well-documented website.

    Stylying / Formatting 💅

    You can style your Airport suggestions or even change the formatting of the output.

    The default formatting is the following :

    <div class="$(unique-result)" single-result" data-index="$(i)"> $(name) $(IATA) </br> $(city) ,$(country)</div>

    The formatting string parameters are listed below:

    Data Syntax Required
    Unique ID $(unique-result) True
    Result Index data-index="$(i)" True
    Airport Name $(name) False
    Airport IATA code $(IATA) False
    Airport Country $(country) False
    Airport City $(city) False

    Check the index.html in the demo folder for an example with the custom formatting.


    Demo 📽

    You can see it in action!

    Clone the repo, install the dependencies and run npm run dev .

    Then just open the index.html file inside demo folder and examine the code.

    Here is a gif demonstrating the functionality.

    AirportJS demo


    Contribute 🧪

    Want to contribute? Just jump in and follow the instructions or open an issue and initialize a discussion on how to make this package better.

    1. Install dependencies.

    2. Run the dev script.

    3. Open the index.html from demo folder and start testing and developing.


    Languages 🗣

    If you are writing a web app that needs to handle inputs from other languages I have a surprise for you.

    You can enrich the airports.json with the names with your own language.

    Check src/data_scripts/addLanguage.py and how it works.

    As an input you have to provide a CSV (; delimeter) with the first column the names of your language, and the second the IATA code they represent in order to match them.

    This code is working but we need to make it more robust and extensible.

    Any recommendations are welcome!

    News

    Changes:

    1. Cleaned the aiport data, minimized International to Intl , removed 'Airport' as a word from the dataset.

    2. Fixed double fetch of Airport Data, thanks @meeuwsen for noticing 🤟

    3. Improved CSS styling 💅 and I need feedback from you to make new changes and make it even more dev friendly!

    4. Added languages script, create data pull automated script (python), created a feature for custom styling/formatting .

    Install

    npm i airport-autocomplete-js

    DownloadsWeekly Downloads

    5

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    1.48 MB

    Total Files

    8

    Last publish

    Collaborators

    • konsalex