2016-10-20 2016-10-21 First step: using the jquery EasyAutocomplete plugin with Django

See also

• http://easyautocomplete.com/
• http://easyautocomplete.com/guide
• http://easyautocomplete.com/guide#sec-data-providers
• https://github.com/pawelczak/EasyAutocomplete

Contents

• 2016-10-20 2016-10-21 First step: using the jquery EasyAutocomplete plugin with Django
  • Why ? EasyAutocomplete can easily become one of the best autocomplete plugins available for free
  • EasyAutocomplete files tree (Javascript, CSS, JSON, PHP files)
  • Javascript SCSS and CSS EasyAutocomplete files
    • EasyAutocomplete-master/src/sass/easy-autocomplete.scss
    • EasyAutocomplete-master/dist/easy-autocomplete.css
    • EasyAutocomplete-master/dist/jquery.easy-autocomplete.js
  • EasyAutocomplete simple example
    • EasyAutocomplete-master/demo/example_simple.html
  • EasyAutocomplete JSON example
    • EasyAutocomplete-master/demo/example_json.html
    • EasyAutocomplete-master/demo/resources/countries.json
  • EasyAutocomplete flags example
    • EasyAutocomplete-master/demo/example_flags.html
    • EasyAutocomplete-master/demo/resources/flags.css
    • EasyAutocomplete-master/demo/resources/flags.png
  • EasyAutocomplete categories example
    • EasyAutocomplete-master/demo/example_categories.html
    • EasyAutocomplete-master/demo/resources/categories.json
  • EasyAutocomplete static_link example
    • EasyAutocomplete-master/demo/example_static_link.html
    • EasyAutocomplete-master/demo/resources/site.json
  • EasyAutocomplete email example
    • EasyAutocomplete-master/demo/example_email.html
    • EasyAutocomplete-master/demo/resources/people.json
  • EasyAutocomplete Django integration
    • Include JS and CSS files from the distribution (static files)
  • Exemples of static files in the Django World
    • The Django contrib module
    • Django_By_Example_Code/Chapter 1/mysite/blog
    • Django_By_Example_Code/Chapter 8
    • Django_By_Example_Code/Chapter 13
  • Django settings example
  • Integration in our Django test project
  • Create a simple update_easy_simple.html
    • Le fichier projects/templates/pojects/projet/update_easy_simple.html
    • First problem : the libraries are not found
    • collectstatic
    • New tree
    • Create an easyautocomplete directory
    • Update the Django template file
    • OK it works !
    • Add JSON files
  • Adding the AJAX call in the Django template
    • URL : http://127.0.0.1:8004/projects/champion_get_json/?term=a
    • pip install httpie (clihttp)
    • http http://127.0.0.1:8004/projects/champion_get_json/?term=a
    • http http://easyautocomplete.com/api/countrySearch.php?phrase=co
    • Avec countrySearch.php
    • Avec Python/Django OK the first step is DONE
      • The Template
      • The View ChampionAutoCompleteView
      • The projects urls.py
  • This is the happy end of the first step

Why ? EasyAutocomplete can easily become one of the best autocomplete plugins available for free

See also

http://126kr.com/article/69n5fxx65il

Because jquery Easyautocomplete can easily become one of the best autocomplete plugins available for free..

EasyAutocomplete files tree (Javascript, CSS, JSON, PHP files)

C:.
|   .gitattributes
|   .gitignore
|   .jscsrc
|   .jshintrc
|   authors.txt
|   bower.json
|   Gruntfile.js
|   LICENSE.txt
|   package.json
|   README.md
|   tree_a_f.txt
|
+---demo
|   |   example_categories.html
|   |   example_custom_template.html
|   |   example_duckduckgo.html
|   |   example_email.html
|   |   example_flags.html
|   |   example_json.html
|   |   example_remote.html
|   |   example_simple.html
|   |   example_static_link.html
|   |   example_theme.html
|   |   example_theme_funky.html
|   |   example_theme_square.html
|   |   example_xml.html
|   |
|   +---api
|   |       countries.php
|   |       countrySearch.php
|   |
|   \---resources
|           categories.json
|           countries.json
|           countries.xml
|           flags.css
|           flags.png
|           icon_search.png
|           people.json
|           site.json
|
+---dist
|   |   easy-autocomplete.css
|   |   easy-autocomplete.min.css
|   |   easy-autocomplete.themes.css
|   |   easy-autocomplete.themes.min.css
|   |   jquery.easy-autocomplete.js
|   |   jquery.easy-autocomplete.min.js
|   |
|   \---maps
|           easy-autocomplete.css.map
|           easy-autocomplete.min.css.map
|           easy-autocomplete.themes.css.map
|           easy-autocomplete.themes.min.css.map
|
+---lib
|       jquery-1.11.2.min.js
|       jquery-2.1.3.min.js
|
+---src
|   |   configuration.js
|   |   constans.js
|   |   core.js
|   |   listBuilder.js
|   |   logger.js
|   |   proccessData.js
|   |   template.js
|   |
|   \---sass
|           easy-autocomplete.scss
|           easy-autocomplete.themes.scss
|
\---test
    |   configuration.js
    |   listBuilder.js
    |   modules.html
    |   proccessData.js
    |   template.js
    |
    +---core
    |   |   build.html
    |   |   build.js
    |   |   categories.html
    |   |   categories.js
    |   |   event.html
    |   |   event.js
    |   |   features.html
    |   |   features.js
    |   |   functions.html
    |   |   functions.js
    |   |   handles.html
    |   |   handles.js
    |   |   plugin.html
    |   |   plugin.js
    |   |   response.html
    |   |   response.js
    |   |   response_json.js
    |   |   response_remote.html
    |   |   response_remote.js
    |   |   response_static.js
    |   |   response_xml.js
    |   |   template.html
    |   |   template.js
    |   |
    |   +---remote
    |   |       countries.php
    |   |       countrySelectService.php
    |   |
    |   \---resources
    |       |   categories.json
    |       |   colors.json
    |       |   colors.xml
    |       |   colors_caps_string.json
    |       |   colors_object.json
    |       |   colors_object.xml
    |       |   colors_string.json
    |       |   countries.json
    |       |   duckduckgo.json
    |       |   response.json
    |       |
    |       \---categories
    |               fruits.json
    |               fruits.xml
    |               otherFruits.xml
    |
    \---qunit
            qunit.css
            qunit.js

Javascript SCSS and CSS EasyAutocomplete files

EasyAutocomplete-master/src/sass/easy-autocomplete.scss

EasyAutocomplete-master/src/sass/easy-autocomplete.scss

$blue: #5A91CB;
$blue-light: rgba(102, 175, 233, 1);
$blue-lighter: rgba(102, 175, 233, 0.6);
$green-light: #41DB00;
$green-lighter: rgba(146, 237, 107, 0.6);
$red-light: #ff5b5b;
$red-lighter: rgba(255, 90, 90, 0.6);
$yellow-light: #ffdb00;
$yellow-lighter: rgba(255, 231, 84, 0.6);
$dark-light: #333;
$dark-lighter: rgba(55, 55, 55, 0.6);
$dark-glass: rgba(0, 0, 0, 0.8);
$dark: #333;
$yellow: rgba(255, 212, 100, 1);
$purple: #c7c0de;

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

.easy-autocomplete {
    position: relative;

    input {
        border: {
            color: #ccc;
            radius: 4px;
            style: solid;
            width: 1px;
        }
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
        color: #555;
        float: none;
        padding: 6px 12px;

        &:hover, &:focus {
            box-shadow: none;
        }
    }

    a {
        display: block;
    }


    &.eac-blue-light {

        input {

            &:hover, &:focus {
                border-color: $blue-light;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $blue-lighter;
            }
        }

        ul {
            border-color: $blue-light;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $blue-lighter;

            li, .eac-category {
                border-color: $blue-light;

                &.selected {
                    background-color: lighten($blue-light, 30%);
                }

            }
        }
    }

    &.eac-green-light {

        input {
            &:hover, &:focus {
                border-color: $green-light;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $green-lighter;
            }
        }

        ul {
            border-color: $green-light;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $green-lighter;

            li, .eac-category {
                border-color: $green-light;

                &.selected {
                    background-color: lighten($green-light, 30%);
                }

            }
        }
    }

    &.eac-red-light {

        input {
            &:hover, &:focus {
                border-color: $red-light;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $red-lighter;
            }
        }

        ul {
            border-color: $red-light;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $red-lighter;

            li, .eac-category {
                border-color: $red-light;

                &.selected {
                    background-color: lighten($red-light, 10%);
                }

            }
        }
    }

    &.eac-yellow-light {

        input {
            &:hover, &:focus {
                border-color: $yellow-light;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $yellow-lighter;
            }
        }

        ul {
            border-color: $yellow-light;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $yellow-lighter;

            li, .eac-category {
                border-color: $yellow-light;

                &.selected {
                    background-color: lighten($yellow-light, 10%);
                }

            }
        }
    }

    &.eac-dark-light {

        input {
            &:hover, &:focus {
                border-color: $dark-light;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $dark-lighter;
            }
        }

        ul {
            border-color: $dark-light;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $dark-lighter;

            li, .eac-category {
                border-color: $dark-light;

                &.selected {
                    background-color: lighten($dark-light, 10%);
                    color: #fff;
                }

            }
        }
    }

    &.eac-dark {
        color: #fff;

        input {
            background-color: lighten($dark-light, 5%);
            border: {
                radius: 4px;
            }
            box-shadow: 0;
            color: #f6f6f6;

            &:hover, &:focus {
                border-color: $dark;
                box-shadow: 0;
            }
        }

        ul {
            border-color: $dark;

            li, .eac-category {
                background-color: lighten($dark-light, 5%);
                border-color: $dark;

                &.selected {
                    background-color: lighten($dark, 25%);
                    color: #f6f6f6;
                }

            }
        }
    }

    &.eac-dark-glass {
        color: #fff;

        input {
            background-color: $dark-glass;
            border: {
                radius: 4px;
            }
            box-shadow: 0;
            color: #f6f6f6;

            &:hover, &:focus {
                border-color: $dark-glass;
                box-shadow: 0;
            }
        }

        ul {
            border-color: $dark-glass;

            li, .eac-category {
                background-color: $dark-glass;
                border-color: $dark-glass;

                &.selected {
                    background-color: lighten($dark-glass, 25%);
                    color: #f6f6f6;
                }

                &:last-child {
                    border-radius: 0 0 4px 4px;
                }

            }
        }
    }



    &.eac-blue {
        color: #fff;

        input {
            @include placeholder {
                color: #f6f6f6;
            }
            background-color: lighten($blue, 5%);
            border: {
                radius: 4px;
            }
            box-shadow: 0;
            color: #f6f6f6;

            &:hover, &:focus {
                border-color: $blue;
                box-shadow: 0;
            }
        }

        ul {
            border-color: $blue;

            li, .eac-category {
                background-color: lighten($blue, 5%);
                border-color: $blue;

                &.selected {
                    background-color: lighten($blue, 15%);
                    color: #f6f6f6;
                }

            }
        }
    }

    &.eac-yellow {
        color: #333;

        input {
            background-color: lighten($yellow, 5%);
            border: {
                color: #333;
                radius: 4px;
            }
            box-shadow: 0;
            color: #333;

            &:hover, &:focus {
                border-color: #333;
                box-shadow: 0;
            }
        }

        ul {
            border-color: #333;

            li, .eac-category {
                background-color: lighten($yellow, 5%);
                border-color: #333;

                &.selected {
                    background-color: lighten($yellow, 15%);
                    color: #333;
                }

            }
        }
    }

    &.eac-purple {
        color: #333;

        input {
            background-color: lighten($purple, 5%);
            border: {
                color: darken($purple, 5%);
            }
            box-shadow: 0;
            color: #333;

            &:hover, &:focus {
                border-color: #333;
                box-shadow: 0;
            }
        }

        ul {
            border-color: #333;

            li, .eac-category {
                background-color: lighten($purple, 5%);
                border-color: #333;

                &.selected {
                    background-color: lighten($purple, 12%);
                    color: #333;
                }

            }
        }
    }

    &.eac-bootstrap {

        input {
            border-color: #ccc;
            border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            color: #555;
            padding: 6px 12px;
        }
    }


}

 
.easy-autocomplete-container {
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;

    ul {
        background: none repeat scroll 0 0 #ffffff;
        border-top: 1px dotted #ccc;
        display: none;
        margin-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        position: relative;
        top: -1px;

        li, .eac-category {
            background: inherit;
            border: {
                color: #ccc;
                image: none;
                style: solid;
                width: 0 1px;
            }
            display: block;
            font: {
                size: 14px;
                weight: normal;
            }
            padding: 4px 12px;
        }

        li {

            &:last-child {
                border: {
                    radius: 0 0 2px 2px;
                    width: 0 1px 1px;
                }
            }

            &.selected {
                background: none repeat scroll 0 0 #ebebeb;
                cursor: pointer;

                div {
                    font-weight: normal;
                }
            }

            div {
                display: block;
                font-weight: normal;
                word-break: break-all;
            }

            b {
                font: {
                    weight: bold;
                }
            }
        }

        .eac-category {
            font: {
                color: #aaa;
                style: italic;
            }
        }

    }
}


.eac-description {
    
    .eac-item {

        span {
            color: #aaa;
            font-style: italic;
            font-size: 0.9em;
        }
    }
}

.eac-icon-left {
    
    .eac-item {
        img {
            margin-right: 4px;
            max-height: 30px;
        }
    }    
}


.eac-icon-right {
    
    .eac-item {
        margin-top: 8px;
        min-height: 24px;
        position: relative;

        img {
            margin-left: 4px;
            max-height: 30px;
            position: absolute;
            right: -4px;
            top: -8px;
        }
    }    
}

EasyAutocomplete-master/dist/easy-autocomplete.css

EasyAutocomplete-master/dist/easy-autocomplete.css

/*
 * easy-autocomplete
 * jQuery plugin for autocompletion
 * 
 * @author Łukasz Pawełczak (http://github.com/pawelczak)
 * @version 1.3.5
 * Copyright  License: 
 */

.easy-autocomplete {
  position: relative;
}
.easy-autocomplete input {
  border-color: #ccc;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
  color: #555;
  float: none;
  padding: 6px 12px;
}
.easy-autocomplete input:hover, .easy-autocomplete input:focus {
  box-shadow: none;
}
.easy-autocomplete a {
  display: block;
}
.easy-autocomplete.eac-blue-light input:hover, .easy-autocomplete.eac-blue-light input:focus {
  border-color: #66afe9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
.easy-autocomplete.eac-blue-light ul {
  border-color: #66afe9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
.easy-autocomplete.eac-blue-light ul li, .easy-autocomplete.eac-blue-light ul .eac-category {
  border-color: #66afe9;
}
.easy-autocomplete.eac-blue-light ul li.selected, .easy-autocomplete.eac-blue-light ul .eac-category.selected {
  background-color: #ecf5fc;
}
.easy-autocomplete.eac-green-light input:hover, .easy-autocomplete.eac-green-light input:focus {
  border-color: #41DB00;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(146, 237, 107, 0.6);
}
.easy-autocomplete.eac-green-light ul {
  border-color: #41DB00;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(146, 237, 107, 0.6);
}
.easy-autocomplete.eac-green-light ul li, .easy-autocomplete.eac-green-light ul .eac-category {
  border-color: #41DB00;
}
.easy-autocomplete.eac-green-light ul li.selected, .easy-autocomplete.eac-green-light ul .eac-category.selected {
  background-color: #9eff75;
}
.easy-autocomplete.eac-red-light input:hover, .easy-autocomplete.eac-red-light input:focus {
  border-color: #ff5b5b;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 90, 90, 0.6);
}
.easy-autocomplete.eac-red-light ul {
  border-color: #ff5b5b;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 90, 90, 0.6);
}
.easy-autocomplete.eac-red-light ul li, .easy-autocomplete.eac-red-light ul .eac-category {
  border-color: #ff5b5b;
}
.easy-autocomplete.eac-red-light ul li.selected, .easy-autocomplete.eac-red-light ul .eac-category.selected {
  background-color: #ff8e8e;
}
.easy-autocomplete.eac-yellow-light input:hover, .easy-autocomplete.eac-yellow-light input:focus {
  border-color: #ffdb00;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 231, 84, 0.6);
}
.easy-autocomplete.eac-yellow-light ul {
  border-color: #ffdb00;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 231, 84, 0.6);
}
.easy-autocomplete.eac-yellow-light ul li, .easy-autocomplete.eac-yellow-light ul .eac-category {
  border-color: #ffdb00;
}
.easy-autocomplete.eac-yellow-light ul li.selected, .easy-autocomplete.eac-yellow-light ul .eac-category.selected {
  background-color: #ffe233;
}
.easy-autocomplete.eac-dark-light input:hover, .easy-autocomplete.eac-dark-light input:focus {
  border-color: #333;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(55, 55, 55, 0.6);
}
.easy-autocomplete.eac-dark-light ul {
  border-color: #333;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(55, 55, 55, 0.6);
}
.easy-autocomplete.eac-dark-light ul li, .easy-autocomplete.eac-dark-light ul .eac-category {
  border-color: #333;
}
.easy-autocomplete.eac-dark-light ul li.selected, .easy-autocomplete.eac-dark-light ul .eac-category.selected {
  background-color: #4d4d4d;
  color: #fff;
}
.easy-autocomplete.eac-dark {
  color: #fff;
}
.easy-autocomplete.eac-dark input {
  background-color: #404040;
  border-radius: 4px;
  box-shadow: 0;
  color: #f6f6f6;
}
.easy-autocomplete.eac-dark input:hover, .easy-autocomplete.eac-dark input:focus {
  border-color: #333;
  box-shadow: 0;
}
.easy-autocomplete.eac-dark ul {
  border-color: #333;
}
.easy-autocomplete.eac-dark ul li, .easy-autocomplete.eac-dark ul .eac-category {
  background-color: #404040;
  border-color: #333;
}
.easy-autocomplete.eac-dark ul li.selected, .easy-autocomplete.eac-dark ul .eac-category.selected {
  background-color: #737373;
  color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass {
  color: #fff;
}
.easy-autocomplete.eac-dark-glass input {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  box-shadow: 0;
  color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass input:hover, .easy-autocomplete.eac-dark-glass input:focus {
  border-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0;
}
.easy-autocomplete.eac-dark-glass ul {
  border-color: rgba(0, 0, 0, 0.8);
}
.easy-autocomplete.eac-dark-glass ul li, .easy-autocomplete.eac-dark-glass ul .eac-category {
  background-color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.8);
}
.easy-autocomplete.eac-dark-glass ul li.selected, .easy-autocomplete.eac-dark-glass ul .eac-category.selected {
  background-color: rgba(64, 64, 64, 0.8);
  color: #f6f6f6;
}
.easy-autocomplete.eac-dark-glass ul li:last-child, .easy-autocomplete.eac-dark-glass ul .eac-category:last-child {
  border-radius: 0 0 4px 4px;
}
.easy-autocomplete.eac-blue {
  color: #fff;
}
.easy-autocomplete.eac-blue input {
  background-color: #6d9ed1;
  border-radius: 4px;
  box-shadow: 0;
  color: #f6f6f6;
}
.easy-autocomplete.eac-blue input::-webkit-input-placeholder {
  color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:-moz-placeholder {
  color: #f6f6f6;
}
.easy-autocomplete.eac-blue input::-moz-placeholder {
  color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:-ms-input-placeholder {
  color: #f6f6f6;
}
.easy-autocomplete.eac-blue input:hover, .easy-autocomplete.eac-blue input:focus {
  border-color: #5A91CB;
  box-shadow: 0;
}
.easy-autocomplete.eac-blue ul {
  border-color: #5A91CB;
}
.easy-autocomplete.eac-blue ul li, .easy-autocomplete.eac-blue ul .eac-category {
  background-color: #6d9ed1;
  border-color: #5A91CB;
}
.easy-autocomplete.eac-blue ul li.selected, .easy-autocomplete.eac-blue ul .eac-category.selected {
  background-color: #94b8dd;
  color: #f6f6f6;
}
.easy-autocomplete.eac-yellow {
  color: #333;
}
.easy-autocomplete.eac-yellow input {
  background-color: #ffdb7e;
  border-color: #333;
  border-radius: 4px;
  box-shadow: 0;
  color: #333;
}
.easy-autocomplete.eac-yellow input:hover, .easy-autocomplete.eac-yellow input:focus {
  border-color: #333;
  box-shadow: 0;
}
.easy-autocomplete.eac-yellow ul {
  border-color: #333;
}
.easy-autocomplete.eac-yellow ul li, .easy-autocomplete.eac-yellow ul .eac-category {
  background-color: #ffdb7e;
  border-color: #333;
}
.easy-autocomplete.eac-yellow ul li.selected, .easy-autocomplete.eac-yellow ul .eac-category.selected {
  background-color: #ffe9b1;
  color: #333;
}
.easy-autocomplete.eac-purple {
  color: #333;
}
.easy-autocomplete.eac-purple input {
  background-color: #d6d1e7;
  border-color: #b8afd5;
  box-shadow: 0;
  color: #333;
}
.easy-autocomplete.eac-purple input:hover, .easy-autocomplete.eac-purple input:focus {
  border-color: #333;
  box-shadow: 0;
}
.easy-autocomplete.eac-purple ul {
  border-color: #333;
}
.easy-autocomplete.eac-purple ul li, .easy-autocomplete.eac-purple ul .eac-category {
  background-color: #d6d1e7;
  border-color: #333;
}
.easy-autocomplete.eac-purple ul li.selected, .easy-autocomplete.eac-purple ul .eac-category.selected {
  background-color: #ebe8f3;
  color: #333;
}
.easy-autocomplete.eac-bootstrap input {
  border-color: #ccc;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  color: #555;
  padding: 6px 12px;
}

.easy-autocomplete-container {
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.easy-autocomplete-container ul {
  background: none repeat scroll 0 0 #ffffff;
  border-top: 1px dotted #ccc;
  display: none;
  margin-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  top: -1px;
}
.easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category {
  background: inherit;
  border-color: #ccc;
  border-image: none;
  border-style: solid;
  border-width: 0 1px;
  display: block;
  font-size: 14px;
  font-weight: normal;
  padding: 4px 12px;
}
.easy-autocomplete-container ul li:last-child {
  border-radius: 0 0 2px 2px;
  border-width: 0 1px 1px;
}
.easy-autocomplete-container ul li.selected {
  background: none repeat scroll 0 0 #ebebeb;
  cursor: pointer;
}
.easy-autocomplete-container ul li.selected div {
  font-weight: normal;
}
.easy-autocomplete-container ul li div {
  display: block;
  font-weight: normal;
  word-break: break-all;
}
.easy-autocomplete-container ul li b {
  font-weight: bold;
}
.easy-autocomplete-container ul .eac-category {
  font-color: #aaa;
  font-style: italic;
}

.eac-description .eac-item span {
  color: #aaa;
  font-style: italic;
  font-size: 0.9em;
}

.eac-icon-left .eac-item img {
  margin-right: 4px;
  max-height: 30px;
}

.eac-icon-right .eac-item {
  margin-top: 8px;
  min-height: 24px;
  position: relative;
}
.eac-icon-right .eac-item img {
  margin-left: 4px;
  max-height: 30px;
  position: absolute;
  right: -4px;
  top: -8px;
}

/*# sourceMappingURL=easy-autocomplete.css.map */

EasyAutocomplete-master/dist/jquery.easy-autocomplete.js

EasyAutocomplete-master/dist/jquery.easy-autocomplete.js

/*
 * easy-autocomplete
 * jQuery plugin for autocompletion
 * 
 * @author Łukasz Pawełczak (http://github.com/pawelczak)
 * @version 1.3.5
 * Copyright  License: 
 */

/*
 * EasyAutocomplete - Configuration 
 */
var EasyAutocomplete = (function(scope){

	scope.Configuration = function Configuration(options) {
		var defaults = {
			data: "list-required",
			url: "list-required",
			dataType: "json",

			listLocation: function(data) {
				return data;
			},

			xmlElementName: "",

			getValue: function(element) {
				return element;
			},

			autocompleteOff: true,

			placeholder: false,

			ajaxCallback: function() {},

			matchResponseProperty: false,

			list: {
				sort: {
					enabled: false,
					method: function(a, b) {
						a = defaults.getValue(a);
						b = defaults.getValue(b);
						if (a < b) {
							return -1;
						}
						if (a > b) {
							return 1;
						}
						return 0;
					}
				},

				maxNumberOfElements: 6,

				hideOnEmptyPhrase: true,

				match: {
					enabled: false,
					caseSensitive: false,
					method: function(element, phrase) {

						if (element.search(phrase) > -1) {
							return true;
						} else {
							return false;
						}
					}
				},

				showAnimation: {
					type: "normal", //normal|slide|fade
					time: 400,
					callback: function() {}
				},

				hideAnimation: {
					type: "normal",
					time: 400,
					callback: function() {}
				},

				/* Events */
				onClickEvent: function() {},
				onSelectItemEvent: function() {},
				onLoadEvent: function() {},
				onChooseEvent: function() {},
				onKeyEnterEvent: function() {},
				onMouseOverEvent: function() {},
				onMouseOutEvent: function() {},	
				onShowListEvent: function() {},
				onHideListEvent: function() {}
			},

			highlightPhrase: true,

			theme: "",

			cssClasses: "",

			minCharNumber: 0,

			requestDelay: 0,

			adjustWidth: true,

			ajaxSettings: {},

			preparePostData: function(data, inputPhrase) {return data;},

			loggerEnabled: true,

			template: "",

			categoriesAssigned: false,

			categories: [{
				maxNumberOfElements: 4
			}]

		};
		
		var externalObjects = ["ajaxSettings", "template"];

		this.get = function(propertyName) {
			return defaults[propertyName];
		};

		this.equals = function(name, value) {
			if (isAssigned(name)) {
				if (defaults[name] === value) {
					return true;
				}
			} 
			
			return false;
		};

		this.checkDataUrlProperties = function() {
			if (defaults.url === "list-required" && defaults.data === "list-required") {
				return false;
			}
			return true;
		};
		this.checkRequiredProperties = function() {
			for (var propertyName in defaults) {
				if (defaults[propertyName] === "required") {
					logger.error("Option " + propertyName + " must be defined");
					return false;
				}
			}
			return true;
		};

		this.printPropertiesThatDoesntExist = function(consol, optionsToCheck) {
			printPropertiesThatDoesntExist(consol, optionsToCheck);
		};


		prepareDefaults();

		mergeOptions();

		if (defaults.loggerEnabled === true) {
			printPropertiesThatDoesntExist(console, options);	
		}

		addAjaxSettings();

		processAfterMerge();
		function prepareDefaults() {

			if (options.dataType === "xml") {
				
				if (!options.getValue) {

					options.getValue = function(element) {
						return $(element).text();
					};
				}

				
				if (!options.list) {

					options.list = {};
				} 

				if (!options.list.sort) {
					options.list.sort = {};
				}


				options.list.sort.method = function(a, b) {
					a = options.getValue(a);
					b = options.getValue(b);
					if (a < b) {
						return -1;
					}
					if (a > b) {
						return 1;
					}
					return 0;
				};

				if (!options.list.match) {
					options.list.match = {};
				}

				options.list.match.method = function(element, phrase) {

					if (element.search(phrase) > -1) {
						return true;
					} else {
						return false;
					}
				};

			}
			if (options.categories !== undefined && options.categories instanceof Array) {

				var categories = [];

				for (var i = 0, length = options.categories.length; i < length; i += 1) { 

					var category = options.categories[i];

					for (var property in defaults.categories[0]) {

						if (category[property] === undefined) {
							category[property] = defaults.categories[0][property];
						}
					}

					categories.push(category);
				}

				options.categories = categories;
			}
		}

		function mergeOptions() {

			defaults = mergeObjects(defaults, options);

			function mergeObjects(source, target) {
				var mergedObject = source || {};

				for (var propertyName in source) {
					if (target[propertyName] !== undefined && target[propertyName] !== null) {

						if (typeof target[propertyName] !== "object" || 
								target[propertyName] instanceof Array) {
							mergedObject[propertyName] = target[propertyName];
						} else {
							mergeObjects(source[propertyName], target[propertyName]);
						}
					}
				}
			
				/* If data is an object */
				if (target.data !== undefined && target.data !== null && typeof target.data === "object") {
					mergedObject.data = target.data;
				}

				return mergedObject;
			}
		}	


		function processAfterMerge() {
			
			if (defaults.url !== "list-required" && typeof defaults.url !== "function") {
				var defaultUrl = defaults.url;
				defaults.url = function() {
					return defaultUrl;
				};
			}

			if (defaults.ajaxSettings.url !== undefined && typeof defaults.ajaxSettings.url !== "function") {
				var defaultUrl = defaults.ajaxSettings.url;
				defaults.ajaxSettings.url = function() {
					return defaultUrl;
				};
			}

			if (typeof defaults.listLocation === "string") {
				var defaultlistLocation = defaults.listLocation;

				if (defaults.dataType.toUpperCase() === "XML") {
					defaults.listLocation = function(data) {
						return $(data).find(defaultlistLocation);
					};
				} else {
					defaults.listLocation = function(data) {
						return data[defaultlistLocation];
					};	
				}
			}

			if (typeof defaults.getValue === "string") {
				var defaultsGetValue = defaults.getValue;
				defaults.getValue = function(element) {
					return element[defaultsGetValue];
				};
			}

			if (options.categories !== undefined) {
				defaults.categoriesAssigned = true;
			}

		}

		function addAjaxSettings() {

			if (options.ajaxSettings !== undefined && typeof options.ajaxSettings === "object") {
				defaults.ajaxSettings = options.ajaxSettings;
			} else {
				defaults.ajaxSettings = {};	
			}
			
		}

		function isAssigned(name) {
			if (defaults[name] !== undefined && defaults[name] !== null) {
				return true;
			} else {
				return false;
			}
		}
		function printPropertiesThatDoesntExist(consol, optionsToCheck) {
			
			checkPropertiesIfExist(defaults, optionsToCheck);

			function checkPropertiesIfExist(source, target) {
				for(var property in target) {
					if (source[property] === undefined) {
						consol.log("Property '" + property + "' does not exist in EasyAutocomplete options API.");		
					}

					if (typeof source[property] === "object" && $.inArray(property, externalObjects) === -1) {
						checkPropertiesIfExist(source[property], target[property]);
					}
				}	
			}
		}
	};

	return scope;

})(EasyAutocomplete || {});


/*
 * EasyAutocomplete - Logger 
 */
var EasyAutocomplete = (function(scope){
	
	scope.Logger = function Logger() {

		this.error = function(message) {
			console.log("ERROR: " + message);
		};

		this.warning = function(message) {
			console.log("WARNING: " + message);
		};
	};

	return scope;

})(EasyAutocomplete || {});
	

/*
 * EasyAutocomplete - Constans
 */
var EasyAutocomplete = (function(scope){	
	
	scope.Constans = function Constans() {
		var constants = {
			CONTAINER_CLASS: "easy-autocomplete-container",
			CONTAINER_ID: "eac-container-",

			WRAPPER_CSS_CLASS: "easy-autocomplete"
		};

		this.getValue = function(propertyName) {
			return constants[propertyName];
		};

	};

	return scope;

})(EasyAutocomplete || {});

/*
 * EasyAutocomplete - ListBuilderService 
 *
 * @author Łukasz Pawełczak 
 *
 */
var EasyAutocomplete = (function(scope) {

	scope.ListBuilderService = function ListBuilderService(configuration, proccessResponseData) {


		this.init = function(data) {
			var listBuilder = [],
				builder = {};

			builder.data = configuration.get("listLocation")(data);
			builder.getValue = configuration.get("getValue");
			builder.maxListSize = configuration.get("list").maxNumberOfElements;

				
			listBuilder.push(builder);

			return listBuilder;
		};

		this.updateCategories = function(listBuilder, data) {
			
			if (configuration.get("categoriesAssigned")) {

				listBuilder = [];

				for(var i = 0; i < configuration.get("categories").length; i += 1) {

					var builder = convertToListBuilder(configuration.get("categories")[i], data);

					listBuilder.push(builder);
				}

			} 

			return listBuilder;
		};

		this.convertXml = function(listBuilder) {
			if(configuration.get("dataType").toUpperCase() === "XML") {

				for(var i = 0; i < listBuilder.length; i += 1) {
					listBuilder[i].data = convertXmlToList(listBuilder[i]);
				}
			}

			return listBuilder;
		};

		this.processData = function(listBuilder, inputPhrase) {

			for(var i = 0, length = listBuilder.length; i < length; i+=1) {
				listBuilder[i].data = proccessResponseData(configuration, listBuilder[i], inputPhrase);
			}

			return listBuilder;
		};

		this.checkIfDataExists = function(listBuilders) {

			for(var i = 0, length = listBuilders.length; i < length; i += 1) {

				if (listBuilders[i].data !== undefined && listBuilders[i].data instanceof Array) {
					if (listBuilders[i].data.length > 0) {
						return true;
					}
				} 
			}

			return false;
		};


		function convertToListBuilder(category, data) {

			var builder = {};

			if(configuration.get("dataType").toUpperCase() === "XML") {

				builder = convertXmlToListBuilder();
			} else {

				builder = convertDataToListBuilder();
			}
			

			if (category.header !== undefined) {
				builder.header = category.header;
			}

			if (category.maxNumberOfElements !== undefined) {
				builder.maxNumberOfElements = category.maxNumberOfElements;
			}

			if (configuration.get("list").maxNumberOfElements !== undefined) {

				builder.maxListSize = configuration.get("list").maxNumberOfElements;
			}

			if (category.getValue !== undefined) {

				if (typeof category.getValue === "string") {
					var defaultsGetValue = category.getValue;
					builder.getValue = function(element) {
						return element[defaultsGetValue];
					};
				} else if (typeof category.getValue === "function") {
					builder.getValue = category.getValue;
				}

			} else {
				builder.getValue = configuration.get("getValue");	
			}
			

			return builder;


			function convertXmlToListBuilder() {

				var builder = {},
					listLocation;

				if (category.xmlElementName !== undefined) {
					builder.xmlElementName = category.xmlElementName;
				}

				if (category.listLocation !== undefined) {

					listLocation = category.listLocation;
				} else if (configuration.get("listLocation") !== undefined) {

					listLocation = configuration.get("listLocation");
				}

				if (listLocation !== undefined) {
					if (typeof listLocation === "string") {
						builder.data = $(data).find(listLocation);
					} else if (typeof listLocation === "function") {

						builder.data = listLocation(data);
					}
				} else {

					builder.data = data;
				}

				return builder;
			}


			function convertDataToListBuilder() {

				var builder = {};

				if (category.listLocation !== undefined) {

					if (typeof category.listLocation === "string") {
						builder.data = data[category.listLocation];
					} else if (typeof category.listLocation === "function") {
						builder.data = category.listLocation(data);
					}
				} else {
					builder.data = data;
				}

				return builder;
			}
		}

		function convertXmlToList(builder) {
			var simpleList = [];

			if (builder.xmlElementName === undefined) {
				builder.xmlElementName = configuration.get("xmlElementName");
			}


			$(builder.data).find(builder.xmlElementName).each(function() {
				simpleList.push(this);
			});

			return simpleList;
		}

	};

	return scope;

})(EasyAutocomplete || {});


/*
 * EasyAutocomplete - Data proccess module
 *
 * Process list to display:
 * - sort 
 * - decrease number to specific number
 * - show only matching list
 *
 */
var EasyAutocomplete = (function(scope) {

	scope.proccess = function proccessData(config, listBuilder, phrase) {

		scope.proccess.match = match;

		var list = listBuilder.data,
			inputPhrase = phrase;//TODO REFACTOR

		list = findMatch(list, inputPhrase);
		list = reduceElementsInList(list);
		list = sort(list);

		return list;


		function findMatch(list, phrase) {
			var preparedList = [],
				value = "";

			if (config.get("list").match.enabled) {

				for(var i = 0, length = list.length; i < length; i += 1) {

					value = config.get("getValue")(list[i]);
					
					if (match(value, phrase)) {
						preparedList.push(list[i]);	
					}
					
				}

			} else {
				preparedList = list;
			}

			return preparedList;
		}

		function match(value, phrase) {

			if (!config.get("list").match.caseSensitive) {

				if (typeof value === "string") {
					value = value.toLowerCase();	
				}
				
				phrase = phrase.toLowerCase();
			}
			if (config.get("list").match.method(value, phrase)) {
				return true;
			} else {
				return false;
			}
		}

		function reduceElementsInList(list) {
			if (listBuilder.maxNumberOfElements !== undefined && list.length > listBuilder.maxNumberOfElements) {
				list = list.slice(0, listBuilder.maxNumberOfElements);
			}

			return list;
		}

		function sort(list) {
			if (config.get("list").sort.enabled) {
				list.sort(config.get("list").sort.method);
			}

			return list;
		}
		
	};


	return scope;


})(EasyAutocomplete || {});


/*
 * EasyAutocomplete - Template 
 *
 * 
 *
 */
var EasyAutocomplete = (function(scope){

	scope.Template = function Template(options) {


		var genericTemplates = {
			basic: {
				type: "basic",
				method: function(element) { return element; },
				cssClass: ""
			},
			description: {
				type: "description",
				fields: {
					description: "description"
				},
				method: function(element) {	return element + " - description"; },
				cssClass: "eac-description"
			},
			iconLeft: {
				type: "iconLeft",
				fields: {
					icon: ""
				},
				method: function(element) {
					return element;
				},
				cssClass: "eac-icon-left"
			},
			iconRight: {
				type: "iconRight",
				fields: {
					iconSrc: ""
				},
				method: function(element) {
					return element;
				},
				cssClass: "eac-icon-right"
			},
			links: {
				type: "links",
				fields: {
					link: ""
				},
				method: function(element) {
					return element;
				},
				cssClass: ""
			},
			custom: {
				type: "custom",
				method: function() {},
				cssClass: ""
			}
		},



		/*
		 * Converts method with {{text}} to function
		 */
		convertTemplateToMethod = function(template) {


			var _fields = template.fields,
				buildMethod;

			if (template.type === "description") {

				buildMethod = genericTemplates.description.method; 

				if (typeof _fields.description === "string") {
					buildMethod = function(elementValue, element) {
						return elementValue + " - <span>" + element[_fields.description] + "</span>";
					};					
				} else if (typeof _fields.description === "function") {
					buildMethod = function(elementValue, element) {
						return elementValue + " - <span>" + _fields.description(element) + "</span>";
					};	
				}

				return buildMethod;
			}

			if (template.type === "iconRight") {

				if (typeof _fields.iconSrc === "string") {
					buildMethod = function(elementValue, element) {
						return elementValue + "<img class='eac-icon' src='" + element[_fields.iconSrc] + "' />" ;
					};					
				} else if (typeof _fields.iconSrc === "function") {
					buildMethod = function(elementValue, element) {
						return elementValue + "<img class='eac-icon' src='" + _fields.iconSrc(element) + "' />" ;
					};
				}

				return buildMethod;
			}


			if (template.type === "iconLeft") {

				if (typeof _fields.iconSrc === "string") {
					buildMethod = function(elementValue, element) {
						return "<img class='eac-icon' src='" + element[_fields.iconSrc] + "' />" + elementValue;
					};					
				} else if (typeof _fields.iconSrc === "function") {
					buildMethod = function(elementValue, element) {
						return "<img class='eac-icon' src='" + _fields.iconSrc(element) + "' />" + elementValue;
					};
				}

				return buildMethod;
			}

			if(template.type === "links") {

				if (typeof _fields.link === "string") {
					buildMethod = function(elementValue, element) {
						return "<a href='" + element[_fields.link] + "' >" + elementValue + "</a>";
					};					
				} else if (typeof _fields.link === "function") {
					buildMethod = function(elementValue, element) {
						return "<a href='" + _fields.link(element) + "' >" + elementValue + "</a>";
					};
				}

				return buildMethod;
			}


			if (template.type === "custom") {

				return template.method;
			}

			return genericTemplates.basic.method;

		},


		prepareBuildMethod = function(options) {
			if (!options || !options.type) {

				return genericTemplates.basic.method;
			}

			if (options.type && genericTemplates[options.type]) {

				return convertTemplateToMethod(options);
			} else {

				return genericTemplates.basic.method;
			}

		},

		templateClass = function(options) {
			var emptyStringFunction = function() {return "";};

			if (!options || !options.type) {

				return emptyStringFunction;
			}

			if (options.type && genericTemplates[options.type]) {
				return (function () { 
					var _cssClass = genericTemplates[options.type].cssClass;
					return function() { return _cssClass;};
				})();
			} else {
				return emptyStringFunction;
			}
		};


		this.getTemplateClass = templateClass(options);

		this.build = prepareBuildMethod(options);


	};

	return scope;

})(EasyAutocomplete || {});


/*
 * EasyAutocomplete - jQuery plugin for autocompletion
 *
 */
var EasyAutocomplete = (function(scope) {

	
	scope.main = function Core($input, options) {
				
		var module = {
				name: "EasyAutocomplete",
				shortcut: "eac"
			};

		var consts = new scope.Constans(),
			config = new scope.Configuration(options),
			logger = new scope.Logger(),
			template = new scope.Template(options.template),
			listBuilderService = new scope.ListBuilderService(config, scope.proccess),
			checkParam = config.equals,

			$field = $input, 
			$container = "",
			elementsList = [],
			selectedElement = -1,
			requestDelayTimeoutId;

		scope.consts = consts;

		this.getConstants = function() {
			return consts;
		};

		this.getConfiguration = function() {
			return config;
		};

		this.getContainer = function() {
			return $container;
		};

		this.getSelectedItemIndex = function() {
			return selectedElement;
		};

		this.getItems = function () {
			return elementsList;
		};

		this.getItemData = function(index) {

			if (elementsList.length < index || elementsList[index] === undefined) {
				return -1;
			} else {
				return elementsList[index];
			}
		};

		this.getSelectedItemData = function() {
			return this.getItemData(selectedElement);
		};

		this.build = function() {
			prepareField();
		};

		this.init = function() {
			init();
		};
		function init() {

			if ($field.length === 0) {
				logger.error("Input field doesn't exist.");
				return;
			}

			if (!config.checkDataUrlProperties()) {
				logger.error("One of options variables 'data' or 'url' must be defined.");
				return;
			}

			if (!config.checkRequiredProperties()) {
				logger.error("Will not work without mentioned properties.");
				return;
			}


			prepareField();
			bindEvents();	

		}
		function prepareField() {

				
			if ($field.parent().hasClass(consts.getValue("WRAPPER_CSS_CLASS"))) {
				removeContainer();
				removeWrapper();
			} 
			
			createWrapper();
			createContainer();	

			$container = $("#" + getContainerId());
			if (config.get("placeholder")) {
				$field.attr("placeholder", config.get("placeholder"));
			}


			function createWrapper() {
				var $wrapper = $("<div>"),
					classes = consts.getValue("WRAPPER_CSS_CLASS");

			
				if (config.get("theme") && config.get("theme") !== "") {
					classes += " eac-" + config.get("theme");
				}

				if (config.get("cssClasses") && config.get("cssClasses") !== "") {
					classes += " " + config.get("cssClasses");
				}

				if (template.getTemplateClass() !== "") {
					classes += " " + template.getTemplateClass();
				}
				

				$wrapper
					.addClass(classes);
				$field.wrap($wrapper);


				if (config.get("adjustWidth") === true) {
					adjustWrapperWidth();	
				}
				

			}

			function adjustWrapperWidth() {
				var fieldWidth = $field.outerWidth();

				$field.parent().css("width", fieldWidth);				
			}

			function removeWrapper() {
				$field.unwrap();
			}

			function createContainer() {
				var $elements_container = $("<div>").addClass(consts.getValue("CONTAINER_CLASS"));

				$elements_container
						.attr("id", getContainerId())
						.prepend($("<ul>"));


				(function() {

					$elements_container
						/* List show animation */
						.on("show.eac", function() {

							switch(config.get("list").showAnimation.type) {

								case "slide":
									var animationTime = config.get("list").showAnimation.time,
										callback = config.get("list").showAnimation.callback;

									$elements_container.find("ul").slideDown(animationTime, callback);
								break;

								case "fade":
									var animationTime = config.get("list").showAnimation.time,
										callback = config.get("list").showAnimation.callback;

									$elements_container.find("ul").fadeIn(animationTime), callback;
								break;

								default:
									$elements_container.find("ul").show();
								break;
							}

							config.get("list").onShowListEvent();
							
						})
						/* List hide animation */
						.on("hide.eac", function() {

							switch(config.get("list").hideAnimation.type) {

								case "slide":
									var animationTime = config.get("list").hideAnimation.time,
										callback = config.get("list").hideAnimation.callback;

									$elements_container.find("ul").slideUp(animationTime, callback);
								break;

								case "fade":
									var animationTime = config.get("list").hideAnimation.time,
										callback = config.get("list").hideAnimation.callback;

									$elements_container.find("ul").fadeOut(animationTime, callback);
								break;

								default:
									$elements_container.find("ul").hide();
								break;
							}

							config.get("list").onHideListEvent();

						})
						.on("selectElement.eac", function() {
							$elements_container.find("ul li").removeClass("selected");
							$elements_container.find("ul li").eq(selectedElement).addClass("selected");

							config.get("list").onSelectItemEvent();
						})
						.on("loadElements.eac", function(event, listBuilders, phrase) {
			

							var $item = "",
								$listContainer = $elements_container.find("ul");

							$listContainer
								.empty()
								.detach();

							elementsList = [];
							var counter = 0;
							for(var builderIndex = 0, listBuildersLength = listBuilders.length; builderIndex < listBuildersLength; builderIndex += 1) {

								var listData = listBuilders[builderIndex].data;

								if (listData.length === 0) {
									continue;
								}

								if (listBuilders[builderIndex].header !== undefined && listBuilders[builderIndex].header.length > 0) {
									$listContainer.append("<div class='eac-category' >" + listBuilders[builderIndex].header + "</div>");
								}

								for(var i = 0, listDataLength = listData.length; i < listDataLength && counter < listBuilders[builderIndex].maxListSize; i += 1) {
									$item = $("<li><div class='eac-item'></div></li>");
									

									(function() {
										var j = i,
											itemCounter = counter,
											elementsValue = listBuilders[builderIndex].getValue(listData[j]);

										$item.find(" > div")
											.on("click", function() {

												$field.val(elementsValue).trigger("change");

												selectedElement = itemCounter;
												selectElement(itemCounter);

												config.get("list").onClickEvent();
												config.get("list").onChooseEvent();
											})
											.mouseover(function() {

												selectedElement = itemCounter;
												selectElement(itemCounter);	

												config.get("list").onMouseOverEvent();
											})
											.mouseout(function() {
												config.get("list").onMouseOutEvent();
											})
											.html(template.build(highlight(elementsValue, phrase), listData[j]));
									})();

									$listContainer.append($item);
									elementsList.push(listData[i]);
									counter += 1;
								}
							}

							$elements_container.append($listContainer);

							config.get("list").onLoadEvent();
						});

				})();

				$field.after($elements_container);
			}

			function removeContainer() {
				$field.next("." + consts.getValue("CONTAINER_CLASS")).remove();
			}

			function highlight(string, phrase) {

				if(config.get("highlightPhrase") && phrase !== "") {
					return highlightPhrase(string, phrase);	
				} else {
					return string;
				}
					
			}

			function escapeRegExp(str) {
				return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 			}

			function highlightPhrase(string, phrase) {
				var escapedPhrase = escapeRegExp(phrase);
				return (string + "").replace(new RegExp("(" + escapedPhrase + ")", "gi") , "<b>$1</b>");
			}



		}
		function getContainerId() {
			
			var elementId = $field.attr("id");

			elementId = consts.getValue("CONTAINER_ID") + elementId;

			return elementId;
		}
		function bindEvents() {

			bindAllEvents();
			

			function bindAllEvents() {
				if (checkParam("autocompleteOff", true)) {
					removeAutocomplete();
				}

				bindFocusOut();
				bindKeyup();
				bindKeydown();
				bindKeypress();
				bindFocus();
				bindBlur();
			}

			function bindFocusOut() {
				$field.focusout(function () {

					var fieldValue = $field.val(),
						phrase;

					if (!config.get("list").match.caseSensitive) {
						fieldValue = fieldValue.toLowerCase();
					}

					for (var i = 0, length = elementsList.length; i < length; i += 1) {

						phrase = config.get("getValue")(elementsList[i]);
						if (!config.get("list").match.caseSensitive) {
							phrase = phrase.toLowerCase();
						}

						if (phrase === fieldValue) {
							selectedElement = i;
							selectElement(selectedElement);
							return;
						}
					}
				});
			}

			function bindKeyup() {
				$field
				.off("keyup")
				.keyup(function(event) {

					switch(event.keyCode) {

						case 27:

							hideContainer();
							loseFieldFocus();
						break;

						case 38:

							event.preventDefault();

							if(elementsList.length > 0 && selectedElement > 0) {

								selectedElement -= 1;

								$field.val(config.get("getValue")(elementsList[selectedElement]));

								selectElement(selectedElement);

							}						
						break;

						case 40:

							event.preventDefault();

							if(elementsList.length > 0 && selectedElement < elementsList.length - 1) {

								selectedElement += 1;

								$field.val(config.get("getValue")(elementsList[selectedElement]));

								selectElement(selectedElement);
								
							}

						break;

						default:

							if (event.keyCode > 40 || event.keyCode === 8) {

								var inputPhrase = $field.val();

								if (!(config.get("list").hideOnEmptyPhrase === true && event.keyCode === 8 && inputPhrase === "")) {

									if (config.get("requestDelay") > 0) {
										if (requestDelayTimeoutId !== undefined) {
											clearTimeout(requestDelayTimeoutId);
										}

										requestDelayTimeoutId = setTimeout(function () { loadData(inputPhrase);}, config.get("requestDelay"));
									} else {
										loadData(inputPhrase);
									}

								} else {
									hideContainer();
								}
								
							}


						break;
					}
				

					function loadData(inputPhrase) {


						if (inputPhrase.length < config.get("minCharNumber")) {
							return;
						}


						if (config.get("data") !== "list-required") {

							var data = config.get("data");

							var listBuilders = listBuilderService.init(data);

							listBuilders = listBuilderService.updateCategories(listBuilders, data);
							
							listBuilders = listBuilderService.processData(listBuilders, inputPhrase);

							loadElements(listBuilders, inputPhrase);

							if ($field.parent().find("li").length > 0) {
								showContainer();	
							} else {
								hideContainer();
							}

						}

						var settings = createAjaxSettings();

						if (settings.url === undefined || settings.url === "") {
							settings.url = config.get("url");
						}

						if (settings.dataType === undefined || settings.dataType === "") {
							settings.dataType = config.get("dataType");
						}


						if (settings.url !== undefined && settings.url !== "list-required") {

							settings.url = settings.url(inputPhrase);

							settings.data = config.get("preparePostData")(settings.data, inputPhrase);

							$.ajax(settings) 
								.done(function(data) {

									var listBuilders = listBuilderService.init(data);

									listBuilders = listBuilderService.updateCategories(listBuilders, data);
									
									listBuilders = listBuilderService.convertXml(listBuilders);
									if (checkInputPhraseMatchResponse(inputPhrase, data)) {

										listBuilders = listBuilderService.processData(listBuilders, inputPhrase);

										loadElements(listBuilders, inputPhrase);	
																				
									}

									if (listBuilderService.checkIfDataExists(listBuilders) && $field.parent().find("li").length > 0) {
										showContainer();	
									} else {
										hideContainer();
									}

									config.get("ajaxCallback")();

								})
								.fail(function() {
									logger.warning("Fail to load response data");
								})
								.always(function() {

								});
						}

						

						function createAjaxSettings() {

							var settings = {},
								ajaxSettings = config.get("ajaxSettings") || {};

							for (var set in ajaxSettings) {
								settings[set] = ajaxSettings[set];
							}

							return settings;
						}

						function checkInputPhraseMatchResponse(inputPhrase, data) {

							if (config.get("matchResponseProperty") !== false) {
								if (typeof config.get("matchResponseProperty") === "string") {
									return (data[config.get("matchResponseProperty")] === inputPhrase);
								}

								if (typeof config.get("matchResponseProperty") === "function") {
									return (config.get("matchResponseProperty")(data) === inputPhrase);
								}

								return true;
							} else {
								return true;
							}

						}

					}


				});
			}

			function bindKeydown() {
				$field
					.on("keydown", function(evt) {
	        		    evt = evt || window.event;
	        		    var keyCode = evt.keyCode;
	        		    if (keyCode === 38) {
	        		        suppressKeypress = true; 
	        		        return false;
	        		    }
		        	})
					.keydown(function(event) {

						if (event.keyCode === 13 && selectedElement > -1) {

							$field.val(config.get("getValue")(elementsList[selectedElement]));

							config.get("list").onKeyEnterEvent();
							config.get("list").onChooseEvent();

							selectedElement = -1;
							hideContainer();

							event.preventDefault();
						}
					});
			}

			function bindKeypress() {
				$field
				.off("keypress");
			}

			function bindFocus() {
				$field.focus(function() {

					if ($field.val() !== "" && elementsList.length > 0) {
						
						selectedElement = -1;
						showContainer();	
					}
									
				});
			}

			function bindBlur() {
				$field.blur(function() {
					setTimeout(function() { 
						
						selectedElement = -1;
						hideContainer();
					}, 250);
				});
			}

			function removeAutocomplete() {
				$field.attr("autocomplete","off");
			}

		}

		function showContainer() {
			$container.trigger("show.eac");
		}

		function hideContainer() {
			$container.trigger("hide.eac");
		}

		function selectElement(index) {
			
			$container.trigger("selectElement.eac", index);
		}

		function loadElements(list, phrase) {
			$container.trigger("loadElements.eac", [list, phrase]);
		}

		function loseFieldFocus() {
			$field.trigger("blur");
		}


	};
	scope.eacHandles = [];

	scope.getHandle = function(id) {
		return scope.eacHandles[id];
	};

	scope.inputHasId = function(input) {

		if($(input).attr("id") !== undefined && $(input).attr("id").length > 0) {
			return true;
		} else {
			return false;
		}

	};

	scope.assignRandomId = function(input) {

		var fieldId = "";

		do {
			fieldId = "eac-" + Math.floor(Math.random() * 10000);		
		} while ($("#" + fieldId).length !== 0);
		
		elementId = scope.consts.getValue("CONTAINER_ID") + fieldId;

		$(input).attr("id", fieldId);
 
	};

	scope.setHandle = function(handle, id) {
		scope.eacHandles[id] = handle;
	};


	return scope;

})(EasyAutocomplete || {});

(function($) {

	$.fn.easyAutocomplete = function(options) {

		return this.each(function() {
			var $this = $(this),
				eacHandle = new EasyAutocomplete.main($this, options);

			if (!EasyAutocomplete.inputHasId($this)) {
				EasyAutocomplete.assignRandomId($this);
			}

			eacHandle.init();

			EasyAutocomplete.setHandle(eacHandle, $this.attr("id"));

		});
	};

	$.fn.getSelectedItemIndex = function() {

		var inputId = $(this).attr("id");

		if (inputId !== undefined) {
			return EasyAutocomplete.getHandle(inputId).getSelectedItemIndex();
		}

		return -1;
	};

	$.fn.getItems = function () {

		var inputId = $(this).attr("id");

		if (inputId !== undefined) {
			return EasyAutocomplete.getHandle(inputId).getItems();
		}

		return -1;
	};

	$.fn.getItemData = function(index) {

		var inputId = $(this).attr("id");

		if (inputId !== undefined && index > -1) {
			return EasyAutocomplete.getHandle(inputId).getItemData(index);
		}

		return -1;
	};

	$.fn.getSelectedItemData = function() {

		var inputId = $(this).attr("id");

		if (inputId !== undefined) {
			return EasyAutocomplete.getHandle(inputId).getSelectedItemData();
		}

		return -1;
	};

})(jQuery);

EasyAutocomplete simple example

EasyAutocomplete-master/demo/example_simple.html

EasyAutocomplete-master/demo/example_simple.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete simple example</title>
        
        <!-- STYLE -> CSS -->         
            <link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
        <!-- end STYLE-->          

    </head>
    <body>

        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - easy example</h1>
            <input id="simple" />
        <!-- end STRUCTURE-->

        <!--BEHAVIOR -> Javascript scripts--> 
            <script src="../lib/jquery-1.11.2.min.js"></script>
            <script src="../dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>               
            <script>

                var options_easy_autocomplete = {
                    data: ["blue", "green", "pink", "red", "yellow"],

                };

                $("#simple").easyAutocomplete(options_easy_autocomplete);

            </script>
        <!-- end BEHAVIOR --> 

    </body>

</html>

EasyAutocomplete JSON example

See also

JSON

EasyAutocomplete-master/demo/example_json.html

EasyAutocomplete-master/demo/example_json.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete json example</title>
        
        <!-- STYLE -> CSS -->        
            <link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
        <!-- end STYLE-->        
    </head>
    <body>

        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - json example</h1>
            <input id="data-json" />
        <!-- end STRUCTURE-->
        
        <!--BEHAVIOR -> Javascript scripts-->        
            <script src="../lib/jquery-1.11.2.min.js"></script>
            <script src="../dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>
            <script>
                let options_easy_autocomplete = {
                    url: "resources/countries.json",

                    getValue: "name",

                    list: {
                        match: {
                            enabled: true
                        }
                    }
                };
                $("#data-json").easyAutocomplete(options_easy_autocomplete);
            </script>
        <!-- end BEHAVIOR --> 
    </body>

</html>

EasyAutocomplete-master/demo/resources/countries.json

EasyAutocomplete-master/demo/resources/countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  {"name": "AndorrA", "code": "AD"}, 
  {"name": "Angola", "code": "AO"}, 
  {"name": "Anguilla", "code": "AI"}, 
  {"name": "Antarctica", "code": "AQ"}, 
  {"name": "Antigua and Barbuda", "code": "AG"}, 
  {"name": "Argentina", "code": "AR"}, 
  {"name": "Armenia", "code": "AM"}, 
  {"name": "Aruba", "code": "AW"}, 
  {"name": "Australia", "code": "AU"}, 
  {"name": "Austria", "code": "AT"}, 
  {"name": "Azerbaijan", "code": "AZ"}, 
  {"name": "Bahamas", "code": "BS"}, 
  {"name": "Bahrain", "code": "BH"}, 
  {"name": "Bangladesh", "code": "BD"}, 
  {"name": "Barbados", "code": "BB"}, 
  {"name": "Belarus", "code": "BY"}, 
  {"name": "Belgium", "code": "BE"}, 
  {"name": "Belize", "code": "BZ"}, 
  {"name": "Benin", "code": "BJ"}, 
  {"name": "Bermuda", "code": "BM"}, 
  {"name": "Bhutan", "code": "BT"}, 
  {"name": "Bolivia", "code": "BO"}, 
  {"name": "Bosnia and Herzegovina", "code": "BA"}, 
  {"name": "Botswana", "code": "BW"}, 
  {"name": "Bouvet Island", "code": "BV"}, 
  {"name": "Brazil", "code": "BR"}, 
  {"name": "British Indian Ocean Territory", "code": "IO"}, 
  {"name": "Brunei Darussalam", "code": "BN"}, 
  {"name": "Bulgaria", "code": "BG"}, 
  {"name": "Burkina Faso", "code": "BF"}, 
  {"name": "Burundi", "code": "BI"}, 
  {"name": "Cambodia", "code": "KH"}, 
  {"name": "Cameroon", "code": "CM"}, 
  {"name": "Canada", "code": "CA"}, 
  {"name": "Cape Verde", "code": "CV"}, 
  {"name": "Cayman Islands", "code": "KY"}, 
  {"name": "Central African Republic", "code": "CF"}, 
  {"name": "Chad", "code": "TD"}, 
  {"name": "Chile", "code": "CL"}, 
  {"name": "China", "code": "CN"}, 
  {"name": "Christmas Island", "code": "CX"}, 
  {"name": "Cocos (Keeling) Islands", "code": "CC"}, 
  {"name": "Colombia", "code": "CO"}, 
  {"name": "Comoros", "code": "KM"}, 
  {"name": "Congo", "code": "CG"}, 
  {"name": "Congo, The Democratic Republic of the", "code": "CD"}, 
  {"name": "Cook Islands", "code": "CK"}, 
  {"name": "Costa Rica", "code": "CR"}, 
  {"name": "Cote D\"Ivoire", "code": "CI"}, 
  {"name": "Croatia", "code": "HR"}, 
  {"name": "Cuba", "code": "CU"}, 
  {"name": "Cyprus", "code": "CY"}, 
  {"name": "Czech Republic", "code": "CZ"}, 
  {"name": "Denmark", "code": "DK"}, 
  {"name": "Djibouti", "code": "DJ"}, 
  {"name": "Dominica", "code": "DM"}, 
  {"name": "Dominican Republic", "code": "DO"}, 
  {"name": "Ecuador", "code": "EC"}, 
  {"name": "Egypt", "code": "EG"}, 
  {"name": "El Salvador", "code": "SV"}, 
  {"name": "Equatorial Guinea", "code": "GQ"}, 
  {"name": "Eritrea", "code": "ER"}, 
  {"name": "Estonia", "code": "EE"}, 
  {"name": "Ethiopia", "code": "ET"}, 
  {"name": "Falkland Islands (Malvinas)", "code": "FK"}, 
  {"name": "Faroe Islands", "code": "FO"}, 
  {"name": "Fiji", "code": "FJ"}, 
  {"name": "Finland", "code": "FI"}, 
  {"name": "France", "code": "FR"}, 
  {"name": "French Guiana", "code": "GF"}, 
  {"name": "French Polynesia", "code": "PF"}, 
  {"name": "French Southern Territories", "code": "TF"}, 
  {"name": "Gabon", "code": "GA"}, 
  {"name": "Gambia", "code": "GM"}, 
  {"name": "Georgia", "code": "GE"}, 
  {"name": "Germany", "code": "DE"}, 
  {"name": "Ghana", "code": "GH"}, 
  {"name": "Gibraltar", "code": "GI"}, 
  {"name": "Greece", "code": "GR"}, 
  {"name": "Greenland", "code": "GL"}, 
  {"name": "Grenada", "code": "GD"}, 
  {"name": "Guadeloupe", "code": "GP"}, 
  {"name": "Guam", "code": "GU"}, 
  {"name": "Guatemala", "code": "GT"}, 
  {"name": "Guernsey", "code": "GG"}, 
  {"name": "Guinea", "code": "GN"}, 
  {"name": "Guinea-Bissau", "code": "GW"}, 
  {"name": "Guyana", "code": "GY"}, 
  {"name": "Haiti", "code": "HT"}, 
  {"name": "Heard Island and Mcdonald Islands", "code": "HM"}, 
  {"name": "Holy See (Vatican City State)", "code": "VA"}, 
  {"name": "Honduras", "code": "HN"}, 
  {"name": "Hong Kong", "code": "HK"}, 
  {"name": "Hungary", "code": "HU"}, 
  {"name": "Iceland", "code": "IS"}, 

EasyAutocomplete flags example

EasyAutocomplete-master/demo/example_flags.html

EasyAutocomplete-master/demo/example_flags.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete flags example</title>
        
        <!-- STYLE -> CSS -->
            <link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
            <link href="resources/flags.css"  rel="stylesheet" type="text/css" >
        <!-- end STYLE-->
        
    </head>
    <body>
        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - country flags example</h1>

            <input id="flags" />
        <!-- end STRUCTURE-->

        <!--BEHAVIOR -> Javascript scripts-->
            <script src="../lib/jquery-1.11.2.min.js"></script>
            <script src="../dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>
            <script>
                var options_easy_autocomplete = {
                    url: "resources/countries.json",

                    getValue: "name",

                    list: {
                        match: {
                            enabled: true
                        },
                        maxNumberOfElements: 10
                    },

                    template: {
                        type: "custom",
                        method: function(value, item) {
                            return "<span class='flag flag-" + (item.code).toLowerCase() + "' ></span>" + value;
                        }
                    }
                };

                $("#flags").easyAutocomplete(options_easy_autocomplete);
            </script>
        <!-- end BEHAVIOR -->
    </body>

</html>

EasyAutocomplete-master/demo/resources/flags.css

EasyAutocomplete-master/demo/resources/flags.css

.flag {
	width: 16px;
	height: 11px;
	background:url(flags.png) no-repeat;
	display: inline-block;
	margin-right: 5px;
}

.flag.flag-ad {background-position: -16px 0}
.flag.flag-ae {background-position: -32px 0}
.flag.flag-af {background-position: -48px 0}
.flag.flag-ag {background-position: -64px 0}
.flag.flag-ai {background-position: -80px 0}
.flag.flag-al {background-position: -96px 0}
.flag.flag-am {background-position: -112px 0}
.flag.flag-an {background-position: -128px 0}
.flag.flag-ao {background-position: -144px 0}
.flag.flag-ar {background-position: -160px 0}
.flag.flag-as {background-position: -176px 0}
.flag.flag-at {background-position: -192px 0}
.flag.flag-au {background-position: -208px 0}
.flag.flag-aw {background-position: -224px 0}
.flag.flag-az {background-position: -240px 0}
.flag.flag-ba {background-position: 0 -11px}
.flag.flag-bb {background-position: -16px -11px}
.flag.flag-bd {background-position: -32px -11px}
.flag.flag-be {background-position: -48px -11px}
.flag.flag-bf {background-position: -64px -11px}
.flag.flag-bg {background-position: -80px -11px}
.flag.flag-bh {background-position: -96px -11px}
.flag.flag-bi {background-position: -112px -11px}
.flag.flag-bj {background-position: -128px -11px}
.flag.flag-bm {background-position: -144px -11px}
.flag.flag-bn {background-position: -160px -11px}
.flag.flag-bo {background-position: -176px -11px}
.flag.flag-br {background-position: -192px -11px}
.flag.flag-bs {background-position: -208px -11px}
.flag.flag-bt {background-position: -224px -11px}
.flag.flag-bv {background-position: -240px -11px}
.flag.flag-bw {background-position: 0 -22px}
.flag.flag-by {background-position: -16px -22px}
.flag.flag-bz {background-position: -32px -22px}
.flag.flag-ca {background-position: -48px -22px}
.flag.flag-catalonia {background-position: -64px -22px}
.flag.flag-cd {background-position: -80px -22px}
.flag.flag-cf {background-position: -96px -22px}
.flag.flag-cg {background-position: -112px -22px}
.flag.flag-ch {background-position: -128px -22px}
.flag.flag-ci {background-position: -144px -22px}
.flag.flag-ck {background-position: -160px -22px}
.flag.flag-cl {background-position: -176px -22px}
.flag.flag-cm {background-position: -192px -22px}
.flag.flag-cn {background-position: -208px -22px}
.flag.flag-co {background-position: -224px -22px}
.flag.flag-cr {background-position: -240px -22px}
.flag.flag-cu {background-position: 0 -33px}
.flag.flag-cv {background-position: -16px -33px}
.flag.flag-cw {background-position: -32px -33px}
.flag.flag-cy {background-position: -48px -33px}
.flag.flag-cz {background-position: -64px -33px}
.flag.flag-de {background-position: -80px -33px}
.flag.flag-dj {background-position: -96px -33px}
.flag.flag-dk {background-position: -112px -33px}
.flag.flag-dm {background-position: -128px -33px}
.flag.flag-do {background-position: -144px -33px}
.flag.flag-dz {background-position: -160px -33px}
.flag.flag-ec {background-position: -176px -33px}
.flag.flag-ee {background-position: -192px -33px}
.flag.flag-eg {background-position: -208px -33px}
.flag.flag-eh {background-position: -224px -33px}
.flag.flag-england {background-position: -240px -33px}
.flag.flag-er {background-position: 0 -44px}
.flag.flag-es {background-position: -16px -44px}
.flag.flag-et {background-position: -32px -44px}
.flag.flag-eu {background-position: -48px -44px}
.flag.flag-fi {background-position: -64px -44px}
.flag.flag-fj {background-position: -80px -44px}
.flag.flag-fk {background-position: -96px -44px}
.flag.flag-fm {background-position: -112px -44px}
.flag.flag-fo {background-position: -128px -44px}
.flag.flag-fr {background-position: -144px -44px}
.flag.flag-ga {background-position: -160px -44px}
.flag.flag-gb {background-position: -176px -44px}
.flag.flag-gd {background-position: -192px -44px}
.flag.flag-ge {background-position: -208px -44px}
.flag.flag-gf {background-position: -224px -44px}
.flag.flag-gg {background-position: -240px -44px}
.flag.flag-gh {background-position: 0 -55px}
.flag.flag-gi {background-position: -16px -55px}
.flag.flag-gl {background-position: -32px -55px}
.flag.flag-gm {background-position: -48px -55px}
.flag.flag-gn {background-position: -64px -55px}
.flag.flag-gp {background-position: -80px -55px}
.flag.flag-gq {background-position: -96px -55px}
.flag.flag-gr {background-position: -112px -55px}
.flag.flag-gs {background-position: -128px -55px}
.flag.flag-gt {background-position: -144px -55px}
.flag.flag-gu {background-position: -160px -55px}
.flag.flag-gw {background-position: -176px -55px}
.flag.flag-gy {background-position: -192px -55px}
.flag.flag-hk {background-position: -208px -55px}
.flag.flag-hm {background-position: -224px -55px}
.flag.flag-hn {background-position: -240px -55px}
.flag.flag-hr {background-position: 0 -66px}
.flag.flag-ht {background-position: -16px -66px}
.flag.flag-hu {background-position: -32px -66px}
.flag.flag-ic {background-position: -48px -66px}
.flag.flag-id {background-position: -64px -66px}
.flag.flag-ie {background-position: -80px -66px}
.flag.flag-il {background-position: -96px -66px}
.flag.flag-im {background-position: -112px -66px}
.flag.flag-in {background-position: -128px -66px}
.flag.flag-io {background-position: -144px -66px}
.flag.flag-iq {background-position: -160px -66px}
.flag.flag-ir {background-position: -176px -66px}
.flag.flag-is {background-position: -192px -66px}
.flag.flag-it {background-position: -208px -66px}
.flag.flag-je {background-position: -224px -66px}
.flag.flag-jm {background-position: -240px -66px}
.flag.flag-jo {background-position: 0 -77px}
.flag.flag-jp {background-position: -16px -77px}
.flag.flag-ke {background-position: -32px -77px}
.flag.flag-kg {background-position: -48px -77px}
.flag.flag-kh {background-position: -64px -77px}
.flag.flag-ki {background-position: -80px -77px}
.flag.flag-km {background-position: -96px -77px}
.flag.flag-kn {background-position: -112px -77px}
.flag.flag-kp {background-position: -128px -77px}
.flag.flag-kr {background-position: -144px -77px}
.flag.flag-kurdistan {background-position: -160px -77px}
.flag.flag-kw {background-position: -176px -77px}
.flag.flag-ky {background-position: -192px -77px}
.flag.flag-kz {background-position: -208px -77px}
.flag.flag-la {background-position: -224px -77px}
.flag.flag-lb {background-position: -240px -77px}
.flag.flag-lc {background-position: 0 -88px}
.flag.flag-li {background-position: -16px -88px}
.flag.flag-lk {background-position: -32px -88px}
.flag.flag-lr {background-position: -48px -88px}
.flag.flag-ls {background-position: -64px -88px}
.flag.flag-lt {background-position: -80px -88px}
.flag.flag-lu {background-position: -96px -88px}
.flag.flag-lv {background-position: -112px -88px}
.flag.flag-ly {background-position: -128px -88px}
.flag.flag-ma {background-position: -144px -88px}
.flag.flag-mc {background-position: -160px -88px}
.flag.flag-md {background-position: -176px -88px}
.flag.flag-me {background-position: -192px -88px}
.flag.flag-mg {background-position: -208px -88px}
.flag.flag-mh {background-position: -224px -88px}
.flag.flag-mk {background-position: -240px -88px}
.flag.flag-ml {background-position: 0 -99px}
.flag.flag-mm {background-position: -16px -99px}
.flag.flag-mn {background-position: -32px -99px}
.flag.flag-mo {background-position: -48px -99px}
.flag.flag-mp {background-position: -64px -99px}
.flag.flag-mq {background-position: -80px -99px}
.flag.flag-mr {background-position: -96px -99px}
.flag.flag-ms {background-position: -112px -99px}
.flag.flag-mt {background-position: -128px -99px}
.flag.flag-mu {background-position: -144px -99px}
.flag.flag-mv {background-position: -160px -99px}
.flag.flag-mw {background-position: -176px -99px}
.flag.flag-mx {background-position: -192px -99px}
.flag.flag-my {background-position: -208px -99px}
.flag.flag-mz {background-position: -224px -99px}
.flag.flag-na {background-position: -240px -99px}
.flag.flag-nc {background-position: 0 -110px}
.flag.flag-ne {background-position: -16px -110px}
.flag.flag-nf {background-position: -32px -110px}
.flag.flag-ng {background-position: -48px -110px}
.flag.flag-ni {background-position: -64px -110px}
.flag.flag-nl {background-position: -80px -110px}
.flag.flag-no {background-position: -96px -110px}
.flag.flag-np {background-position: -112px -110px}
.flag.flag-nr {background-position: -128px -110px}
.flag.flag-nu {background-position: -144px -110px}
.flag.flag-nz {background-position: -160px -110px}
.flag.flag-om {background-position: -176px -110px}
.flag.flag-pa {background-position: -192px -110px}
.flag.flag-pe {background-position: -208px -110px}
.flag.flag-pf {background-position: -224px -110px}
.flag.flag-pg {background-position: -240px -110px}
.flag.flag-ph {background-position: 0 -121px}
.flag.flag-pk {background-position: -16px -121px}
.flag.flag-pl {background-position: -32px -121px}
.flag.flag-pm {background-position: -48px -121px}
.flag.flag-pn {background-position: -64px -121px}
.flag.flag-pr {background-position: -80px -121px}
.flag.flag-ps {background-position: -96px -121px}
.flag.flag-pt {background-position: -112px -121px}
.flag.flag-pw {background-position: -128px -121px}
.flag.flag-py {background-position: -144px -121px}
.flag.flag-qa {background-position: -160px -121px}
.flag.flag-re {background-position: -176px -121px}
.flag.flag-ro {background-position: -192px -121px}
.flag.flag-cs {background-position: -208px -121px}
.flag.flag-ru {background-position: -224px -121px}
.flag.flag-rw {background-position: -240px -121px}
.flag.flag-sa {background-position: 0 -132px}
.flag.flag-sb {background-position: -16px -132px}
.flag.flag-sc {background-position: -32px -132px}
.flag.flag-scotland {background-position: -48px -132px}
.flag.flag-sd {background-position: -64px -132px}
.flag.flag-se {background-position: -80px -132px}
.flag.flag-sg {background-position: -96px -132px}
.flag.flag-sh {background-position: -112px -132px}
.flag.flag-si {background-position: -128px -132px}
.flag.flag-sk {background-position: -144px -132px}
.flag.flag-sl {background-position: -160px -132px}
.flag.flag-sm {background-position: -176px -132px}
.flag.flag-sn {background-position: -192px -132px}
.flag.flag-so {background-position: -208px -132px}
.flag.flag-somaliland {background-position: -224px -132px}
.flag.flag-sr {background-position: -240px -132px}
.flag.flag-ss {background-position: 0 -143px}
.flag.flag-st {background-position: -16px -143px}
.flag.flag-sv {background-position: -32px -143px}
.flag.flag-sx {background-position: -48px -143px}
.flag.flag-sy {background-position: -64px -143px}
.flag.flag-sz {background-position: -80px -143px}
.flag.flag-tc {background-position: -96px -143px}
.flag.flag-td {background-position: -112px -143px}
.flag.flag-tf {background-position: -128px -143px}
.flag.flag-tg {background-position: -144px -143px}
.flag.flag-th {background-position: -160px -143px}
.flag.flag-tj {background-position: -176px -143px}
.flag.flag-tk {background-position: -192px -143px}
.flag.flag-tl {background-position: -208px -143px}
.flag.flag-tm {background-position: -224px -143px}
.flag.flag-tn {background-position: -240px -143px}
.flag.flag-to {background-position: 0 -154px}
.flag.flag-tr {background-position: -16px -154px}
.flag.flag-tt {background-position: -32px -154px}
.flag.flag-tv {background-position: -48px -154px}
.flag.flag-tw {background-position: -64px -154px}
.flag.flag-tz {background-position: -80px -154px}
.flag.flag-ua {background-position: -96px -154px}
.flag.flag-ug {background-position: -112px -154px}
.flag.flag-um {background-position: -128px -154px}
.flag.flag-us {background-position: -144px -154px}
.flag.flag-uy {background-position: -160px -154px}
.flag.flag-uz {background-position: -176px -154px}
.flag.flag-va {background-position: -192px -154px}
.flag.flag-vc {background-position: -208px -154px}
.flag.flag-ve {background-position: -224px -154px}
.flag.flag-vg {background-position: -240px -154px}
.flag.flag-vi {background-position: 0 -165px}
.flag.flag-vn {background-position: -16px -165px}
.flag.flag-vu {background-position: -32px -165px}
.flag.flag-wales {background-position: -48px -165px}
.flag.flag-wf {background-position: -64px -165px}
.flag.flag-ws {background-position: -80px -165px}
.flag.flag-xk {background-position: -96px -165px}
.flag.flag-ye {background-position: -112px -165px}
.flag.flag-yt {background-position: -128px -165px}
.flag.flag-za {background-position: -144px -165px}
.flag.flag-zanzibar {background-position: -160px -165px}
.flag.flag-zm {background-position: -176px -165px}
.flag.flag-zw {background-position: -192px -165px}

EasyAutocomplete-master/demo/resources/flags.png

EasyAutocomplete-master/demo/resources/flags.png

EasyAutocomplete categories example

EasyAutocomplete-master/demo/example_categories.html

EasyAutocomplete-master/demo/example_categories.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete categories</title>        
        <!-- STYLE -> CSS -->
            <link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
            <link href="../dist/easy-autocomplete.themes.min.css" rel="stylesheet" type="text/css">
            <link href='//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,600,600italic&amp;subset=latin,cyrillic-ext,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
        <!-- end STYLE-->        
    </head>
    <body>
        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - categories example</h1>
            <input id="data-categories" placeholder="Fruits and vegetables" />
        <!-- end STRUCTURE-->

        <!--BEHAVIOR -> Javascript scripts-->
            <script src="../lib/jquery-1.11.2.min.js"></script>
            <script src="../dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>        
            <script>
                var options_easy_autocomplete = {
                    url: "resources/categories.json",

                    categories: [{
                        listLocation: "fruits",
                        header: "--- FRUITS ---"
                    }, {
                        listLocation: "vegetables",
                        header: "--- VEGETABLES ---"
                    }],

                    list: {
                        match: {
                            enabled: false
                        },
                        maxNumberOfElements: 10
                    },

                    theme: "dark"
                };
                
                $("#data-categories").easyAutocomplete(options_easy_autocomplete);  
                              
            </script>
        <!-- end BEHAVIOR -->   
    </body>

</html>

EasyAutocomplete-master/demo/resources/categories.json

EasyAutocomplete-master/demo/resources/categories.json

{
	"fruits": ["Apple", "Cherry", "Clementine", "Honeydew melon", "Watermelon", "Satsuma"],
	"vegetables": ["Pepper", "Jerusalem artichoke", "Green bean", "Fennel", "Courgette", "Yam"]
}

EasyAutocomplete static_link example

EasyAutocomplete-master/demo/example_static_link.html

EasyAutocomplete-master/demo/example_static_link.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete static links</title>
        <!-- STYLE -> CSS -->        
            <link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
        <!-- end STYLE-->        
    </head>
    <body>

        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - static links</h1>
            <input id="data-links" />
        <!-- end STRUCTURE-->


        <!--BEHAVIOR -> Javascript scripts--> 
            <script src="../lib/jquery-1.11.2.min.js"></script>
            <script src="../dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>               
            <script>
                var options_easy_autocomplete = {
                    url: "resources/site.json",

                    getValue: "text",

                    template: {
                        type: "links",
                        fields: {
                            link: "site"
                        }
                    },

                    list: {
                        match: {
                            enabled: false
                        }
                    },

                    theme: "plate-dark"
                };

                $("#data-links").easyAutocomplete(options_easy_autocomplete);
                
            </script>
        <!-- end BEHAVIOR --> 
    </body>

</html>

EasyAutocomplete-master/demo/resources/site.json

EasyAutocomplete-master/demo/resources/site.json

[{
    "text": "Home",
    "site": "http://easyautocomplete.com"
    },
    {
    "text": "Guide",
    "site": "http://easyautocomplete.com/guide"
    },
    {
    "text": "Examples",
    "site": "http://easyautocomplete.com/examples"
    },
    {
    "text": "Themes",
    "site": "http://easyautocomplete.com/themes"
    },
    {
    "text": "Download",
    "site": "http://easyautocomplete.com/download"
    }
]

EasyAutocomplete email example

EasyAutocomplete-master/demo/example_email.html

EasyAutocomplete-master/demo/example_email.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete email example</title>
        <!-- STYLE -> CSS -->          
            <link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
        <!-- end STYLE--> 
    </head>
    <body>

        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - email example</h1>
            <input id="data-email" />
        <!-- end STRUCTURE-->

        <!--BEHAVIOR -> Javascript scripts-->
            <script src="../lib/jquery-1.11.2.min.js"></script>
            <script src="../dist/jquery.easy-autocomplete.min.js" type="text/javascript" ></script>        
            <script>
                var options_easy_autocomplete = {
                    url: "resources/people.json",

                    getValue: "email",

                    template: {
                        type: "description",
                        fields: {
                            description: "email"
                        }
                    },

                    list: {
                        match: {
                            enabled: true
                        }
                    },

                    theme: "plate-dark"
                };

                $("#data-email").easyAutocomplete(options_easy_autocomplete);
            </script>
        <!-- end BEHAVIOR --> 

    </body>

</html>

EasyAutocomplete-master/demo/resources/people.json

EasyAutocomplete-master/demo/resources/people.json

[   {
        "name": "Declan Haley2 s",
        "email": "Cr12as.lorem.lorem@nonquam.ca"
    },
    {
        "name": "Francis Marsh",
        "email": "ne2que@arcu.edu"
    },
    {
        "name": "Gage Figueroa",
        "email": "Sed.auctor.odio@magnis.ca"
    },
    {
        "name": "Asher Gay",
        "email": "Phasellus@nonsapien.ca"
    },
    {
        "name": "Erasmus Roach",
        "email": "amet@aptent.net"
    },
    {
        "name": "Francis Johnston",
        "email": "Ut.sagittis.lobortis@Donecsollicitudin.com"
    },
    {
        "name": "Dustin Mckinney",
        "email": "velit.Quisque@liberodui.co.uk"
    },
    {
        "name": "Zane Camacho",
        "email": "et.netus@Phasellusvitae.co.uk"
    },
    {
        "name": "Murphy Larsen",
        "email": "sit.amet@felisadipiscing.com"
    },
    {
        "name": "Shad Kemp",
        "email": "justo@laoreetlectus.co.uk"
    },
    {
        "name": "Octavius Wolfe",
        "email": "sociis@aptenttacitisociosqu.org"
    },
    {
        "name": "Cooper Bell",
        "email": "Quisque@apurus.ca"
    },
    {
        "name": "Lev Mccarthy",
        "email": "diam@amet.co.uk"
    },
    {
        "name": "Arthur Mejia",
        "email": "Nulla.dignissim@urna.ca"
    },
    {
        "name": "Ferris Cameron",
        "email": "vulputate.velit@In.net"
    },
    {
        "name": "Ivor Greer",
        "email": "nisi@Nuncmauriselit.ca"
    },
    {
        "name": "Alan Church",
        "email": "et.ipsum@dolor.co.uk"
    },
    {
        "name": "Walter Berry",
        "email": "neque@lacus.edu"
    },
    {
        "name": "Hyatt Bowman",
        "email": "lobortis.ultrices@mollis.org"
    },
    {
        "name": "Acton Bradley",
        "email": "commodo.tincidunt@ut.com"
    },
    {
        "name": "Duncan Hancock",
        "email": "Donec@sem.net"
    },
    {
        "name": "Macaulay Trujillo",
        "email": "in.sodales.elit@Donec.ca"
    },
    {
        "name": "Jack Estrada",
        "email": "nibh@Quisquetinciduntpede.net"
    },
    {
        "name": "Edward Wilkerson",
        "email": "Quisque.fringilla.euismod@idliberoDonec.co.uk"
    },
    {
        "name": "Clarke Mullen",
        "email": "nunc.Quisque.ornare@leo.com"
    },
    {
        "name": "Steel Rodriquez",
        "email": "a@diam.ca"
    },
    {
        "name": "Jerome Edwards",
        "email": "tincidunt@consectetuer.net"
    },
    {
        "name": "Quentin Blevins",
        "email": "In.scelerisque@idrisus.co.uk"
    },
    {
        "name": "Maxwell Baxter",
        "email": "lacinia.mattis@erateget.ca"
    },
    {
        "name": "Beau Mcclain",
        "email": "dis.parturient@feugiatnon.co.uk"
    },
    {
        "name": "Jarrod Valenzuela",
        "email": "adipiscing@FuscefeugiatLorem.net"
    },
    {
        "name": "Grant Rosario",
        "email": "feugiat@rutrumFuscedolor.co.uk"
    },
    {
        "name": "Wade Atkinson",
        "email": "et@euerosNam.com"
    },
    {
        "name": "Ryder Lindsey",
        "email": "Quisque.fringilla.euismod@Suspendissealiquetmolestie.edu"
    },
    {
        "name": "Upton Schmidt",
        "email": "arcu.Nunc.mauris@quis.ca"
    },
    {
        "name": "Seth Tate",
        "email": "elit.a.feugiat@turpisnon.edu"
    },
    {
        "name": "Emery Shields",
        "email": "mi.Aliquam.gravida@vestibulummassarutrum.net"
    },
    {
        "name": "Slade Bolton",
        "email": "venenatis.a@fringillami.co.uk"
    },
    {
        "name": "Lucas Yates",
        "email": "purus.in@idnuncinterdum.ca"
    },
    {
        "name": "Dean Rosa",
        "email": "vulputate.ullamcorper@commodoipsum.ca"
    },
    {
        "name": "Ahmed Daniel",
        "email": "ligula@idsapien.ca"
    },
    {
        "name": "Hector Hardin",
        "email": "egestas@Nullam.edu"
    },
    {
        "name": "Byron Dickerson",
        "email": "sociis@Proinultrices.co.uk"
    },
    {
        "name": "Myles Workman",
        "email": "magnis.dis@odioPhasellusat.co.uk"
    },
    {
        "name": "Jerry Howard",
        "email": "tortor.nibh@sitamet.edu"
    },
    {
        "name": "Igor Chase",
        "email": "sagittis@gravida.edu"
    },
    {
        "name": "Aquila Mcclure",
        "email": "dictum@Phasellusinfelis.co.uk"
    },
    {
        "name": "John Hansen",
        "email": "ut@molestietellus.com"
    },
    {
        "name": "Forrest Goodwin",
        "email": "enim.nec.tempus@massalobortis.com"
    },
    {
        "name": "Griffin Lott",
        "email": "enim.Curabitur.massa@convalliserat.edu"
    },

EasyAutocomplete Django integration

See also

• http://easyautocomplete.com/guide

Include JS and CSS files from the distribution (static files)

See also

• http://easyautocomplete.com/download
• https://docs.djangoproject.com/en/dev/howto/static-files/

First thing you need to do, is to download EasyAutocomplete plugin files.

More information about it can be found in the Download section.

Javascript and css files(in the actual version) are located in dist folder of the project.

Note

If you want to make any changes, uncompiled javascript files and unprocessed sass files can be found in the src folder.

Exemples of static files in the Django World

The Django contrib module

C:\PROJECT\PYTHON_ENVS\DJANGO_TEST_AUTOCOMPLETE_35_64\LIB\SITE-PACKAGES\DJANGO\CONTRIB\ADMIN\STATIC
\---admin
    +---css
    |       base.css
    |       changelists.css
    |       dashboard.css
    |       fonts.css
    |       forms.css
    |       login.css
    |       rtl.css
    |       widgets.css
    |
    +---fonts
    |       LICENSE.txt
    |       README.txt
    |       Roboto-Bold-webfont.woff
    |       Roboto-Light-webfont.woff
    |       Roboto-Regular-webfont.woff
    |
    +---img
    |   |   calendar-icons.svg
    |   |   icon-addlink.svg
    |   |   icon-alert.svg
    |   |   icon-calendar.svg
    |   |   icon-changelink.svg
    |   |   icon-clock.svg
    |   |   icon-deletelink.svg
    |   |   icon-no.svg
    |   |   icon-unknown-alt.svg
    |   |   icon-unknown.svg
    |   |   icon-yes.svg
    |   |   inline-delete.svg
    |   |   LICENSE
    |   |   README.txt
    |   |   search.svg
    |   |   selector-icons.svg
    |   |   sorting-icons.svg
    |   |   tooltag-add.svg
    |   |   tooltag-arrowright.svg
    |   |
    |   \---gis
    |           move_vertex_off.svg
    |           move_vertex_on.svg
    |
    \---js
        |   actions.js
        |   actions.min.js
        |   calendar.js
        |   cancel.js
        |   change_form.js
        |   collapse.js
        |   collapse.min.js
        |   core.js
        |   inlines.js
        |   inlines.min.js
        |   jquery.init.js
        |   popup_response.js
        |   prepopulate.js
        |   prepopulate.min.js
        |   prepopulate_init.js
        |   SelectBox.js
        |   SelectFilter2.js
        |   timeparse.js
        |   urlify.js
        |
        +---admin
        |       DateTimeShortcuts.js
        |       RelatedObjectLookups.js
        |
        \---vendor
            +---jquery
            |       jquery.js
            |       jquery.min.js
            |       LICENSE-JQUERY.txt
            |
            \---xregexp
                    LICENSE-XREGEXP.txt
                    xregexp.js
                    xregexp.min.js

Django_By_Example_Code/Chapter 1/mysite/blog

The static directory is in the blog application directory.

C:\TMP\DJANGO-BY-EXAMPLE-BOOK-MASTER\CHAP_1_BLOG\MYSITE\BLOG
|   admin.py
|   apps.py
|   models.py
|   tests.py
|   urls.py
|   views.py
|   __init__.py
|
+---migrations
|       0001_initial.py
|       __init__.py
|
+---static
|   \---css
|           blog.css
|
\---templates
    |   pagination.html
    |
    \---blog
        |   base.html
        |   pagination.html
        |
        \---post
                detail.html
                list.html
                pagination.html

Django_By_Example_Code/Chapter 8

There are static directories in:

• the courses and shop applications directory
• the project directory.

\---myshop
    |   manage.py
    |
    +---cart
    |   |   admin.py
    |   |   cart.py

    |
    +---myshop
    |       celery.py
    |       db.sqlite3
    |       settings.py
    |       urls.py
    |       wsgi.py
    |       __init__.py
    |
    +---orders
    |   |   admin.py
    |   |   forms.py
    |   |   models.py

    |   |
    |   +---static
    |   |   \---css
    |   |           admin.css
    |   |           pdf.css
    |   |

    |
    +---shop
    |   |   admin.py
    |   |   models.py
    |   |   tests.py
    |   |   urls.py

    |   |
    |   +---static
    |   |   +---css
    |   |   |       base.css
    |   |   |
    |   |   \---img
    |   |           no_image.png
    |   |

    |
    \---static
        +---admin
        |   +---css
        |   |       base.css
        |   |       changelists.css
        |   |       dashboard.css
        |   |       forms.css
        |   |       ie.css
        |   |       login.css
        |   |       rtl.css
        |   |       widgets.css
        |   |
        |   +---img
        |   |   |   changelist-bg.gif
        |   |   |   changelist-bg_rtl.gif
        |   |   |   default-bg-reverse.gif
        |   |   |   default-bg.gif
        |   |   |   deleted-overlay.gif
        |   |   |   icon-no.gif
        |   |   |   icon-unknown.gif
        |   |   |   icon-yes.gif
        |   |   |   icon_addlink.gif
        |   |   |   icon_alert.gif
        |   |   |   icon_calendar.gif
        |   |   |   icon_changelink.gif
        |   |   |   icon_clock.gif
        |   |   |   icon_deletelink.gif
        |   |   |   icon_error.gif
        |   |   |   icon_searchbox.png
        |   |   |   icon_success.gif
        |   |   |   inline-delete-8bit.png
        |   |   |   inline-delete.png
        |   |   |   inline-restore-8bit.png
        |   |   |   inline-restore.png
        |   |   |   inline-splitter-bg.gif
        |   |   |   nav-bg-grabber.gif
        |   |   |   nav-bg-reverse.gif
        |   |   |   nav-bg-selected.gif
        |   |   |   nav-bg.gif
        |   |   |   selector-icons.gif
        |   |   |   selector-search.gif
        |   |   |   sorting-icons.gif
        |   |   |   tooltag-add.png
        |   |   |   tooltag-arrowright.png
        |   |   |
        |   |   \---gis
        |   |           move_vertex_off.png
        |   |           move_vertex_on.png
        |   |
        |   \---js
        |       |   actions.js
        |       |   actions.min.js
        |       |   calendar.js
        |       |   collapse.js
        |       |   collapse.min.js
        |       |   core.js
        |       |   inlines.js
        |       |   inlines.min.js
        |       |   jquery.init.js
        |       |   jquery.js
        |       |   jquery.min.js
        |       |   LICENSE-JQUERY.txt
        |       |   prepopulate.js
        |       |   prepopulate.min.js
        |       |   related-widget-wrapper.js
        |       |   SelectBox.js
        |       |   SelectFilter2.js
        |       |   timeparse.js
        |       |   urlify.js
        |       |
        |       \---admin
        |               DateTimeShortcuts.js
        |               RelatedObjectLookups.js
        |
        +---css
        |       admin.css
        |       base.css
        |       pdf.css
        |
        \---img
                no_image.png

Django_By_Example_Code/Chapter 13

There are static directories in:

• the courses application directory
• the project directory.

\---educa
    |   db.sqlite3
    |   manage.py
    |
    +---config
    |       nginx.conf
    |       uwsgi.ini
    |
    +---courses
    |   |   admin.py
    |   |   fields.py
    |   |   forms.py

    |   |
    |   +---static
    |   |   \---css
    |   |           base.css
    |   |


    |
    +---educa
    |   |   db.sqlite3
    |   |   urls.py
    |   |   wsgi.py
    |   |   __init__.py
    |   |
    |   \---settings
    |           base.py
    |           local.py
    |           pro.py
    |           __init__.py
    |
    +---ssl
    |       educa.crt
    |       educa.key
    |
    +---static
    |   +---admin
    |   |   +---css
    |   |   |       base.css
    |   |   |       changelists.css
    |   |   |       dashboard.css
    |   |   |       forms.css
    |   |   |       ie.css
    |   |   |       login.css
    |   |   |       rtl.css
    |   |   |       widgets.css
    |   |   |
    |   |   +---img
    |   |   |   |   changelist-bg.gif
    |   |   |   |   changelist-bg_rtl.gif
    |   |   |   |   default-bg-reverse.gif
    |   |   |   |   default-bg.gif
    |   |   |   |   deleted-overlay.gif
    |   |   |   |   icon-no.gif
    |   |   |   |   icon-unknown.gif
    |   |   |   |   icon-yes.gif
    |   |   |   |   icon_addlink.gif
    |   |   |   |   icon_alert.gif
    |   |   |   |   icon_calendar.gif
    |   |   |   |   icon_changelink.gif
    |   |   |   |   icon_clock.gif
    |   |   |   |   icon_deletelink.gif
    |   |   |   |   icon_error.gif
    |   |   |   |   icon_searchbox.png
    |   |   |   |   icon_success.gif
    |   |   |   |   inline-delete-8bit.png
    |   |   |   |   inline-delete.png
    |   |   |   |   inline-restore-8bit.png
    |   |   |   |   inline-restore.png
    |   |   |   |   inline-splitter-bg.gif
    |   |   |   |   nav-bg-grabber.gif
    |   |   |   |   nav-bg-reverse.gif
    |   |   |   |   nav-bg-selected.gif
    |   |   |   |   nav-bg.gif
    |   |   |   |   selector-icons.gif
    |   |   |   |   selector-search.gif
    |   |   |   |   sorting-icons.gif
    |   |   |   |   tooltag-add.png
    |   |   |   |   tooltag-arrowright.png
    |   |   |   |
    |   |   |   \---gis
    |   |   |           move_vertex_off.png
    |   |   |           move_vertex_on.png
    |   |   |
    |   |   \---js
    |   |       |   actions.js
    |   |       |   actions.min.js
    |   |       |   calendar.js
    |   |       |   collapse.js
    |   |       |   collapse.min.js
    |   |       |   core.js
    |   |       |   inlines.js
    |   |       |   inlines.min.js
    |   |       |   jquery.init.js
    |   |       |   jquery.js
    |   |       |   jquery.min.js
    |   |       |   LICENSE-JQUERY.txt
    |   |       |   prepopulate.js
    |   |       |   prepopulate.min.js
    |   |       |   related-widget-wrapper.js
    |   |       |   SelectBox.js
    |   |       |   SelectFilter2.js
    |   |       |   timeparse.js
    |   |       |   urlify.js
    |   |       |
    |   |       \---admin
    |   |               DateTimeShortcuts.js
    |   |               RelatedObjectLookups.js
    |   |
    |   +---css
    |   |       base.css
    |   |
    |   \---rest_framework
    |       +---css
    |       |       bootstrap-tweaks.css
    |       |       bootstrap.min.css
    |       |       default.css
    |       |       prettify.css
    |       |
    |       +---fonts
    |       |       glyphicons-halflings-regular.eot
    |       |       glyphicons-halflings-regular.svg
    |       |       glyphicons-halflings-regular.ttf
    |       |       glyphicons-halflings-regular.woff
    |       |
    |       +---img
    |       |       glyphicons-halflings-white.png
    |       |       glyphicons-halflings.png
    |       |       grid.png
    |       |
    |       \---js
    |               bootstrap.min.js
    |               default.js
    |               jquery-1.8.1-min.js
    |               prettify-min.js
    |

Django settings example

See also

• https://docs.djangoproject.com/en/dev/ref/settings/#settings-staticfiles

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# https://docs.djangoproject.com/en/dev/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

Integration in our Django test project

+---static
|   +---css
|   |       easy-autocomplete.min.css
|   |       easy-autocomplete.themes.min.css
|   |
|   \---js
|           jquery.easy-autocomplete.min.js

|   ajax_selects_singers_db
|   manage.py
|   run_local_dev_server.bat
|
+---projects
|   |   admin.py
|   |   apps.py
|   |   forms.py
|   |   models.py
|   |   tests.py
|   |   urls.py
|   |   views.py
|   |   __init__.py
|   |
|   +---migrations
|   |   |   0001_initial.py
|   |   |   __init__.py
|   |   |

|   +---templates
|   |   \---projects
|   |       \---project
|   |               update.html
|   |

|
+---projet_ajax
|   |   settings.py
|   |   urls.py
|   |   wsgi.py
|   |   __init__.py
|   |
|
+---singers
|   |   admin.py
|   |   apps.py
|   |   forms.py
|   |   lookups.py
|   |   models.py
|   |   tests.py
|   |   urls.py
|   |   views.py
|   |   __init__.py
|   |
|   +---migrations
|   |   |   0001_initial.py
|   |   |   0002_auto_20161017_1612.py
|   |   |   0003_auto_20161017_1632.py
|   |   |   __init__.py
|   |   |

|   |
|   +---templates
|   |   \---singers
|   |       +---author
|   |       |       update.html
|   |       |
|   |       +---book
|   |       |       update.html
|   |       |
|   |       \---song
|   |               update.html
|   |

|
+---static
|   +---css
|   |       easy-autocomplete.min.css
|   |       easy-autocomplete.themes.min.css
|   |
|   \---js
|           jquery.easy-autocomplete.min.js
|
\---templates
        base.html
        search_form.html

Create a simple update_easy_simple.html

Le fichier projects/templates/pojects/projet/update_easy_simple.html

{% load static %}
{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete simple example</title>

        <!-- STYLE -> CSS -->
            <link rel="stylesheet" href="{% static 'css/easy-autocomplete.css' %}" type="text/css">
            <link rel="stylesheet" href="{% static 'css/easy-autocomplete.themes.css' %}" type="text/css">

        <!-- end STYLE-->

    </head>
    <body>

        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - easy example</h1>
            <input id="simple" />
        <!-- end STRUCTURE-->

        <!--BEHAVIOR -> Javascript scripts-->
            <!-- Using jQuery with a CDN -->
            <script src="//code.jquery.com/jquery-1.11.2.js"></script>
            <script src="{% static 'js/jquery.easy-autocomplete.js' %}" type="text/javascript"></script>

            <script>

                var options_easy_autocomplete = {
                    data: ["blue", "green", "pink", "red", "yellow"],

                };

                $("#simple").easyAutocomplete(options_easy_autocomplete);

            </script>
        <!-- end BEHAVIOR -->

    </body>

</html>

First problem : the libraries are not found

from os.path import (join,
                     basename,
                     dirname)

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
DJANGO_ROOT = BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Site name ('projet_ajax')
SITE_NAME = basename(DJANGO_ROOT)
# Absolute filesystem path to the top-level project folder:
PROJECT_ROOT=dirname(DJANGO_ROOT)

logging.info("DJANGO_ROOT={} SITE_NAME={} PROJECT_ROOT={}".format(
    DJANGO_ROOT,
    SITE_NAME,
    PROJECT_ROOT,
))


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/dev/howto/static-files/
STATIC_ROOT = join(PROJECT_ROOT, 'staticfiles')
# STATIC_ROOT="C:/projects_id3/P5N001/XLOG5R372_id3_intranet/trunk/django-www/staticfiles"
# Static files (CSS, JavaScript, Images)
# http://www.marinamele.com/taskbuster-django-tutorial/create-home-page-with-tdd-staticfiles-templates-settings
# https://docs.djangoproject.com/en/dev/howto/static-files/
# http://whitenoise.evans.io/en/latest/django.html#runserver-nostatic
STATIC_URL = '/static/'
# https://docs.djangoproject.com/en/dev/howto/static-files/
# les répertoires ou sont sockés les fichiers statiques en developpement
STATICFILES_DIRS = [
    join(DJANGO_ROOT, 'static'),
]

collectstatic

+:

python manage.py collectstatic

New tree

+---doc_sphinx
|   +---actions
|   |   \---2016

+---projet_ajax
|   +---projects
|   |   +---migrations

\---staticfiles
    +---admin
    |   +---css
    |   +---fonts
    |   +---img
    |   |   \---gis
    |   \---js
    |       +---admin
    |       \---vendor
    |           +---jquery
    |           \---xregexp
    +---ajax_select
    |   +---css
    |   +---images
    |   \---js
    +---autocomplete_light
    |   \---vendor
    |       \---select2
    |           +---dist
    |           |   +---css
    |           |   \---js
    |           |       \---i18n
    |           +---src
    |           |   \---js
    |           |       \---select2
    |           |           +---compat
    |           |           +---data
    |           |           +---dropdown
    |           |           +---i18n
    |           |           \---selection
    |           +---tests
    |           |   +---a11y
    |           |   +---data
    |           |   +---dropdown
    |           |   +---integration
    |           |   +---options
    |           |   +---selection
    |           |   +---utils
    |           |   \---vendor
    |           \---vendor
    +---css
    +---debug_toolbar
    |   +---css
    |   +---img
    |   \---js
    +---django_extensions
    |   +---css
    |   +---img
    |   \---js
    \---js

Create an easyautocomplete directory

python manage.py collectstatic

|
\---easyautocomplete
    +---css
    |       easy-autocomplete.css
    |       easy-autocomplete.min.css
    |       easy-autocomplete.themes.css
    |       easy-autocomplete.themes.min.css
    |
    \---js
            jquery.easy-autocomplete.js
            jquery.easy-autocomplete.min.js

Update the Django template file

{% load static %}
{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EasyAutocomplete simple example</title>

        <!-- STYLE -> CSS -->
            <link rel="stylesheet" href="{% static 'easyautocomplete/css/easy-autocomplete.css' %}" type="text/css">
            <link rel="stylesheet" href="{% static 'easyautocomplete/css/easy-autocomplete.themes.css' %}" type="text/css">

        <!-- end STYLE-->

    </head>
    <body>

        <!-- STRUCTURE -> HTML5 elements -->
            <h1>EasyAutocomplete - easy example</h1>
            <input id="simple" />
        <!-- end STRUCTURE-->

        <!--BEHAVIOR -> Javascript scripts-->
            <!-- Using jQuery with a CDN -->
            <script src="//code.jquery.com/jquery-1.11.2.js"></script>
            <script src="{% static 'easyautocomplete/js/jquery.easy-autocomplete.js' %}" type="text/javascript"></script>

            <script>

                var options_easy_autocomplete = {
                    data: ["blue", "green", "pink", "red", "yellow"],

                };

                $("#simple").easyAutocomplete(options_easy_autocomplete);

            </script>
        <!-- end BEHAVIOR -->

    </body>

</html>

OK it works !

Add JSON files

Adding the AJAX call in the Django template

See also

http://easyautocomplete.com/guide#sec-data-providers

URL : http://127.0.0.1:8004/projects/champion_get_json/?term=a

pip install httpie (clihttp)

See also

• https://httpie.org/
• https://twitter.com/jkbrzt
• https://twitter.com/clihttp
• https://github.com/eliangcs/http-prompt

HTTPie—aitch-tee-tee-pie—is an open source CLI HTTP client that will make you smile: a user-friendly curl alternative that provides a simple http command designed for painless debugging and interaction with HTTP servers, RESTful APIs, and web services.

pip install httpie

http http://127.0.0.1:8004/projects/champion_get_json/?term=a

[
    {
        "id": 6,
        "label": "aaaa",
        "value": "aaaa"
    },
    {
        "id": 1,
        "label": "admin",
        "value": "admin"
    },
    {
        "id": 8,
        "label": "albert",
        "value": "albert"
    },
    {
        "id": 2,
        "label": "champion_0001",
        "value": "champion_0001"
    },
    {
        "id": 7,
        "label": "john",
        "value": "john"
    },
    {
        "id": 10,
        "label": "nigel",
        "value": "nigel"
    },
    {
        "id": 9,
        "label": "zoya",
        "value": "zoya"
    }
]

http http://easyautocomplete.com/api/countrySearch.php?phrase=co

[
    {
        "name": "COCOS (KEELING) ISLANDS"
    },
    {
        "name": "COLOMBIA"
    },
    {
        "name": "COMOROS"
    },
    {
        "name": "CONGO"
    },
    {
        "name": "CONGO, THE DEMOCRATIC REPUBLIC OF THE"
    },
    {
        "name": "COOK ISLANDS"
    },
    {
        "name": "COSTA RICA"
    },
    {
        "name": "COTE D IVOIRE"
    },
    {
        "name": "MEXICO"
    },
    {
        "name": "MONACO"
    },
    {
        "name": "MOROCCO"
    },
    {
        "name": "PUERTO RICO"
    },
    {
        "name": "TURKS AND CAICOS ISLANDS"
    }
]

Avec countrySearch.php

<input id="provider-remote" />

var options = {
    url: function(phrase) {
        return "api/countrySearch.php?phrase=" + phrase + "&format=json";
    },

    getValue: "value"
};

$("#provider-remote").easyAutocomplete(options);

Avec Python/Django OK the first step is DONE

See also

• http://127.0.0.1:8004/projects/project/1/update/
• http://127.0.0.1:8004/projects/champion_get_json/?term=a

The Template

{# --------------------------------------------------------------------------------------------#}
{# simple AJAX call #}
{# http://easyautocomplete.com/guide#sec-data-providers #}
{# --------------------------------------------------------------------------------------------#}
{% comment %}
(django_test_autocomplete_35_64) C:\projects_id3\django-test-autocomplete>http http://127.0.0.1:8004/projects/champion_get_json/?term=z
HTTP/1.0 200 OK
Content-Type: application/json
Date: Fri, 21 Oct 2016 07:51:46 GMT
Server: WSGIServer/0.2 CPython/3.5.2
X-Frame-Options: SAMEORIGIN

[
    {
        "id": 9,
        "label": "zoya",
        "value": "zoya"
    }
]
{% endcomment %}
var options_easy_autocomplete_ajax = {
    {# we have to build this URL: http://127.0.0.1:8004/projects/champion_get_json/?term=a #}
    url: function(term) {
        return "{% url 'projects:champion_get_json' %}" + "?term=" + term;
    },
    getValue: "value",
};
$("#data-ajax").easyAutocomplete(options_easy_autocomplete_ajax);

The View ChampionAutoCompleteView

class ChampionAutoCompleteView(FormView):
    """
    Documentation
    =============

    - https://ccbv.co.uk/projects/Django/1.9/django.views.generic.edit/FormView/

    """
    def get(self, request, *args, **kwargs):
        """term is sent by the jquery-ui autocomplete widget.

        The filter is on the username and the user email.

        """
        term = request.GET.get("term")
        if term:
            users = User.objects.filter(Q(username__icontains=term)
                                        | Q(email__icontains=term)).order_by('username')
        else:
            users = User.objects.all()[:50]

        results = []
        for user in users:
            user_json = {}
            user_json['id'] = user.id
            user_json['label'] = user.username
            user_json['value'] = user.username
            results.append(user_json)

        data = json.dumps(results)
        mimetype = 'application/json'
        return HttpResponse(data, mimetype)

The projects urls.py

# calls by jquery-ui autocomplete (AJAX calls)
# http://127.0.0.1:8004/projects/champion_get_json/?term=a
url(r'^champion_get_json/$',
    ChampionAutoCompleteView.as_view(),
    name='champion_get_json'),

This is the happy end of the first step